React Latest Version: Know It All Here

    An Introduction to React Latest Version

     React Latest Version 16.13.0 is the latest. Update in the line of the React.js. software. The new update contains bug fixes and new deprecation warnings to help prepare for any future major releases. 


    New Warnings to React Latest Version- 

     There are a few warnings for some updates during render. 

    It is essential that a react component does not cause side effects in other components during rendering. 

     It is supported to call setState during render but only for the same component. If the setState is called during a render on a different component, the below warning will now appear: 

    Warning: Cannot update a component from inside the function body of a different component.

     This warning allows us to find unintentional application bugs caused by state changes. In the rare and extreme case that you do intentionally want to change the state of another component as a result of rendering, you can do so by wrapping the setState call into useEffect. 


    Warnings for conflicting style rules-

     When dynamically applying a style that contains longhand and shorthand versions of CSS properties a particular few combinations of updates can cause inconsistent styling. For example: 

    <div style={toggle ?

      { background: ‘blue’, backgroundColor: ‘red’ } :

      { backgroundColor: ‘red’ }





    It is possible that you expect this <div> to always have a red background, no matter the value of toggle, but this is not necessary. 

    However, on alternating the value of toggle between true and false, the background colors start as red the goes on to alternate between transparent and blue. 


    React now detects conflicting style rules and logs a warning. 

    In order to fix this issue, do not mix shorthand and longhand versions of the same CSS property in the style prop. 


    Warnings for some deprecated string refs-

    String Refs is an old legacy API which is discouraged and is going to be deprecated in the future: 

    <Button ref=”myRef />


    It is important that we note that String Refs and refs in general are not the same. Refs remain fully supported in React js. 


    In the future, an automated script will be provided to help migrate away from String Refs. However, in some rare cases, the migration does not happen automatically. This release adds a new warning specifically for those cases in advance of deprecation. 


    For example, it will fire if you use String Refs together with the render prop pattern. 


    class ClassWithRenderProp extends React.Component {

      componentDidMount() {



      render() {

    return this.props.children();




    class ClassParent extends React.Component {

      render() {

    return (


         {() => <Button ref=”myRef />}






    Codes like the one above often indicate bugs. You might expect the ref to be available on ClassParent, but instead it gets placed on ClassWithRenderProp. 


    You most likely will not have a code like this. If you do have it, and it is intentional, convert it to React.createRef() instead: 


    class ClassWithRenderProp extends React.Component {

      myRef = React.createRef();

      componentDidMount() {



      render() {

    return this.props.children(this.myRef);




    class ClassParent extends React.Component {

      render() {

    return (


         {myRef => <Button ref={myRef} />}






    Note- To see this warning, you must have the babel-plugin-transform-react-jsx-self installed in your Babel plugins. 


    Deprecating React.createFactory

    React.createFactory is a legacy helper for creating React elements. This release adds a deprecation warning to the method. It will be removed in the future major version. 

     Replace usages of React.createFactory with regular JSX. Alternatively, you can copy-paste the code given below. It has the same effect. 

     let createFactory = type => React.createElement.bind(null, type);


    Deprecating ReactDOM.unstable_createPortal in favor of ReactDOM.createPortal


    When React 16 was released, create portal became an officially supported API.


    However, we kept unstable_createPortal as a supported alias to keep the few libraries that adopted it working. We are now deprecating the unstable alias. Use create portal directly instead of unstable_createPortal. It has exactly the same signature.


    Other notable improvements include- 


    1)    Component stacks in hydration warnings- React adds component stacks to its development warnings, enabling developers to isolate bugs and debug their programs efficiently. This release adds component stacks to a number of development warnings that did not previously have them. As an example, consider this hydration warning from the previous versions- 

     While it is pointing out an error in the code, it is not clear whether the error exists and how to go about in solving it. This release adds a component stack to this warning, which makes it look like this:

     This makes it clear where the problem lies and lets you locate and solve the bug faster. 


    2)    Notable bugfixes- 

     This release contains a few other notable improvements: 


    •  In Strict Development Mode, React calls lifecycle methods twice to flush out any possible unwanted side effects. This release adds that behavior to shouldComponentUpdate. This should not affect most of the code. To fix the side effects in shouldComponentUpdate, move the code with side effects into componentDidUpdate.
    •  In Strict Development Mode, the warnings for usage of the legacy context API didn’t include the stack for the component that triggered the warning. This release adds the missing stack to the warning.
    •  onMouseEnter now does not trigger on the use of the disable <button> elements.
    •  ReactDOM was missing a version export since we published v16. This release adds the feature back. We do not recommend using it in your application logic, but it is useful while debugging issues with mismatching/ multiple versions of ReactDOM on the same page.



    React v16.13.0 is available on the npm registry. 


    To install React 16 with Yarn run: 

    yarn add [email protected]^16.13.0 [email protected]^16.13.0


    To install React 16 with npm, run:

    npm install –save [email protected]^16.13.0 [email protected]^16.13.0


    UMD builds of React via a CDN: 

    <script crossorigin src=”[email protected]/umd/react.production.min.js“></script>

    <script crossorigin src=”[email protected]/umd/react-dom.production.min.js“></script>




          Warn when a string ref is used in a manner that’s not amenable to a future condemned

          Deprecate React.createFactory()


    React DOM-

            Warn when changes in style may cause an unexpected collision 

            Warn when a function component is updated during another component’s render phase 

            Deprecate unstable_createPortal

            Fix onMouseEnter being fired on disabled buttons 

            Call shouldComponentUpdate twice when developing in StrictMode 

            Add version property to ReactDOM 

            Don’t call toString() of dangerouslySetInnerHTML

            Show component stacks in more warnings 




    Recent Articles

    React Fragment: Find out what we encountered.!

      React Fragment: Hello Devs, in my journey of learning react I came across some frontend conditions where I had to render multiple react components,...

    React Admin: Documentation | Features | Dahboard | Templates

      React Admin is a framework for the front-end development of data-driven applications. That is operating in a browser over the top of REST or...

    React Hooks

      A hook is a component that allows us to use the features of React and state without defining a class. This feature is added...

    React Animation: A definitive guide

    React Animations Add-ons The ReactTransitionGroup add-on is a lower-level Applications Program Interface (API) component for creating react animations. And the ReactCSSTransitionGroup, is a component used...

    Create React App: A Complete guide for Beginners

      Create React App is the modern way of building an official Single Page React Application. It sets up a comfortable environment for building react...

    Related Stories

    Leave A Reply

    Please enter your comment!
    Please enter your name here