What’s new in React 16

Codibly / Business  / What’s new in React 16

What’s new in React 16

A few months ago we’ve received a new version of Facebook’s JavaScript library – React v.16. This complex changes took years to apply.
React 16, as some you may know as Fiber, was a whole rewrite of React’s library via a new reconciliation algorithm. However, the new core architecture keeps most of the API intact and backward compatible. In this post, I will present you most important changes in brief.

 
Update
You can bravely update your application without any issues unless you have a large application with a lot of different libraries or TypeScript. Then you have to check compatibility and update all of your repositories.
 
Changing the license
Great news for React community is changing the license to MIT. The previous license was the reason for many doubts, but finally, companies can use it without any concerns.
 
New render return types
With this new feature, you can now return a string or an array of elements from a component’s render method.

render() {
  // No need to wrap list items in an extra element!
  return [
    // Don't forget the keys :)
    <li key="A">First item</li>,
    <li key="B">Second item</li>,
    <li key="C">Third item</li>,
  ];
}

You have to add a key to each element to avoid the key warning unless you are using newer 16.2 version, where there is added support for special fragment element which doesn’t require keys.
See the full list of supported return types.
 
Fragment element (v. 16.2)
Fragments are first-class components that can be used in place of arrays I described above. They look like empty JSX tags and let you group a list of children without adding extra nodes to the DOM.

render() {
  return (
    <>
      Some text.
      <h2>A heading</h2>
      More text.
      <h2>Another heading</h2>
      Even more text.
    </>
  );
}

If you need to pass attributes like the key to your element, you have to use full

<Fragment></Fragment>

instead of empty braces.
More information about Fragment.
 
Error handling
Instead of unmounting the whole application every time an error occurs, now you can use error boundaries. In the past, JavaScript errors inside components used to corrupt React’s internal state and cause it to emit cryptic errors on next renders.
Error boundaries are React components that catch JS errors anywhere in their child component tree, log those errors, and display a fallback UI instead of the component tree that crashed.
A class component becomes an error boundary if it defines a new lifecycle method called componentDidCatch(error, info):

 componentDidCatch(error, info) {
    // Display fallback UI
    this.setState({ hasError: true });
    // You can also log the error to an error reporting service
    logErrorToMyService(error, info);
  }

Portals
React 16 has portals now. They are a better way to render an element outside the component where it was created.

render(){
  return ReactDOM.createPortal(
    this.props.children,
    document.getElementById('mars')
  )
}

in HTML we will see

<body>
  <div id="earth"><!-- Everyone lives here --></div>
  <div id="mars"><!-- Only the chosen one can teleport here --></div>
</body>

React does *not* create a new div. It renders the children into `domNode`.
 
Custom DOM attributes
Earlier, unknown HTML and SVG attributes were ignored by React, now you can add your DOM nodes any attribute you want. Remember to use camelCase to follow React’s conventions of using attributes in HTML.
 
Reduced file size
React is now 32% smaller compared to the previous version (30% post-gzip) 🙂
 
JavaScript Environment Requirements
The new version of React depends on the collection types – Map and Set. If your project is required to support older browsers and devices, you have to include a global polyfill in your bundled application (ex. core-js or babel-polyfill).

No Comments

Leave a Comment