More

    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’ }

    }>

      …

    </div>

     

    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() {

    doSomething(this.refs.myRef);

      }

      render() {

    return this.props.children();

      }

    }

     

    class ClassParent extends React.Component {

      render() {

    return (

       <ClassWithRenderProp>

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

       </ClassWithRenderProp>

    );

      }

    }

     

    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() {

    doSomething(this.myRef.current);

      }

      render() {

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

      }

    }

     

    class ClassParent extends React.Component {

      render() {

    return (

       <ClassWithRenderProp>

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

       </ClassWithRenderProp>

    );

      }

    }

     

    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.

     Installation- 

     React

    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=”https://unpkg.com/[email protected]/umd/react.production.min.js“></script>

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

     

    Changelog

    React

          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 Ecommerce Templates

      React is the most popular library for the development of e-commerce applications. React eCommerce templates for building eCommerce apps are a combination of several...

    What is React Yarn? How to Install It?

    Introduction to React Yarn The technical community shares hundreds and thousands of pieces of code every day in the community of JavaScript. As a result,...

    React Editor: Features, Installation and Limitations

    Why do we need the react editor?  There is a large range of code-based editors like CodeMirror, Monaco, Ace, etc., that provide us with the...

    React Babel: Everything You Need to Know About It

    Introduction About React Babel: React Babel is a very well known and well-implemented open-source transcompiler of JavaScript. We use it mainly to convert the ECMA...

    React Websocket: Usage, Installation and much more

    Introduction About React Websocket:  If you want to create a long-running connection between a client and a server then use React Websocket. Let's take an...

    Related Stories

    Leave A Reply

    Please enter your comment!
    Please enter your name here

    Stay on op - Ge the daily news in your inbox