What is React 16 all about?

June 02, 2018

What is React 16 all about?

React 16 was recently announced and it has been in the works for quite a while now. It’s a ground-up complete rewrite of the library, while keeping the API intact and backwards compatible. “Fiber” - the new alias that’s used for the library, has many new most welcome features and improvements. Most of them highly anticipated.

Let’s take a look at them! Below we’ll cover the more important and impactful features such as new render return types, error boundaries, portals and more!

New Render return types

A simple but welcome change is that you can now simply return numbers or strings. React 16 knows how to deal with it.

Here you can see a simple string return from inside the render function.

render() {
  return ‘This is a simple string’;
}

And here a simple number. In React 16 this is OK.

render() {
  return 42;
}

In React 16 the render method no longer needs to return a single element. You’re now able to return multiple elements without wrapping them with an additional element by simply returning an array. One thing to keep in mind though, is that since the internal algorithm used to determine differences in the DOM requires to keep track of elements using a “key” attribute, you will need to provide each element with it.

Make sure that the keys provided are unique, otherwise React will also warn you in the console!

For example:

const MyArrayElement = () => {
  return [
    <li key=”1”>Element One</li>,
    <li key=”2”>Element Two</li>,
    <li key=”3”>Element Three</li>,
  ];
}

Say goodbye to those unnecessary <div>’s or <span>’s that were simply there to clutter the DOM!

Error boundaries and error handling

Previously, an error somewhere in a component in the JavaScript code would break the entire application. Now, that’s no longer the case. In React 16 we can make use of a mechanism that got built into the React core: error boundaries . React’s very own catch { } block!

These error boundaries are simple wrapper components that make use of a new lifecycle method called componentDidCatch (). If an error happens anywhere in the child component tree, this wrapper component (error boundary) will catch that error. This new lifecycle method will get called whenever a component’s render method, lifecycle method or constructor throws an error. The parameters that it gets called with are: the actual error instance and an info object that contains some information regarding the component stack.

componentDidCatch(error, info) {
  this.setState({ error, info });
}

Now with the error caught, we can render a fallback ui by referring to this.state.error in the render function.

Improved setState

In React 16 you can now return null from setState. Why would you do that you may ask? If you return null React will avoid doing unnecessary updates and it will not re-trigger the render function. Previously you could simply check before actually calling setState. Not that big of an improvement but it’s noteworthy!

Portals

Ever wanted to put a component somewhere else in your DOM, outside of the current tree? React 16’s got your back! You can now insert a child element into a different location in the DOM - by using portals.

Typically you will have a root div that’s going to host the root of your react application. Something like this:

And your index.html will contain something like this:

…
<body>
  <div id=”root”></div>
</body>
…

Well now you can add a sibling element, like this:

…
<body>
  <div id=”root”></div>
  <div id=”portal”></div>
</body>

…

Somewhere within a render function of a component in the app you can do the following:

return ReactDOM.createPortal(
  <div>Content inserted into portal - on level with app root!</div>,
  document.getElementById('portal')
);

The createPortal function will take the content you want to render (any component or tree of components) and it will place it at the portal container that you just defined earlier. The first argument of the function is the content or component tree and the second argument is the DOM element that will act as the container.

Portals can be extremely useful when dealing with modals or pop-ups. We all know how pesky z-index can be when we want something to be on top!

Custom DOM Attributes

Previously if you passed any attribute to an element that was not recognised by React, it would get discarded entirely and ignored. That’s no longer the case. React will pass along any unrecognised attributes and they’ll end up in the DOM, just how you’d expect. Canonical React naming is still to be used for known attributes such as className or tabIndex.

New License for React

React 16 ( and 15.6.2 ) have been published under the MIT License. This is a very welcome change and it clears up many doubts and uncertainties that developers and companies around the world had regarding React usage.

Closing Note

React 16 brought significant improvements and many fixes. The underlying re-work has been kept transparent and APIs remained the same. It is backwards compatible but there are a couple known breaking changes.

Most breaking changes however revolve around uncommon usage ( or perhaps even not intended usage ) of the library. A list of the breaking changes can be found here.