What you need to know about React 16

React 16 got released. It’s a major release with new features, improvements, performance and more. You can read official release notes or announcement from React team. The official documentation has been updated with a new design (so, it looks a bit different than usual). Below is just a summary of what React 16 release is all about.

Fiber

Fiber is React’s core algorithm. Basically it’s an engine that powers React. Fiber is not the API that developers interact with when building applications, which stays the same. Full rewrite allowed the core team to add support for asynchronous rendering (improved performance for large component trees), error handling and other features. More details here.

Server Side Rendering

render() method was replaced with hydrate() specifically for server side rendering.

hydrate(<App/>, document.getElementById("root"));

HTML elements won’t be generated with data-reactid attributes anymore, now HTML output will be exactly the same as you write it. Error handling and portals (discussed below) are not yet supported in SSR. Now React in development is as performant as in production and just faster overall, up to 3.8x faster than react 15 (SSR). And to take performance even further, React 16 now supports rendering directly to a Node stream. More details here.

Error Handling

It was very annoying to see the bright red error screen every time there was JS error while developing React apps. Not anymore. Welcome componentDidCatch(), new lifecycle method introduced in React 16. It allows to catch and handle any JavaScript errors. It’s a declarative React version of try {} catch block. More details here.

Render elements outside components

React Components map directly into DOM tree. In some cases when you have elements like modals or loaders you need to find a workaround to bring them outside of the current component. React 16 portal feature allows you to attach parts of the Component tree inside a different DOM element.

render() {
    return ReactDOM.createPortal(
      <div className="modal">
        {this.props.children}
      </div>,
      document.createElement('div')
    );
  }

Portals provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component. More details here.

Support for custom HTML attributes

Now it’s possible to pass custom HTML attributes without warnings. In addition to all standard DOM attributes, data- and aria- attributes, it’s possible to add your own.

<div unicornindex="1">🦄</div>

All standard attributes still have to be camel cased. More details here.

Render arrays and strings

In a component all the rendered content had to wrapped in a single DOM element like div or span. React 16 supports array of elements or just plain text. No need to wrap the content, subtle change but very convenient.

const ListItems = () => ([
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
]);
const Text = () => ('This is just plain text')

State performance improvement

Calling setState with null no longer triggers an update. This allows you to decide in an updater function if you want to re-render. This is useful for performance, now you can check for any event if state hasn’t been updated, set it to null and it won’t re-render the component.

getUserName = (user) => {
    const newName = user.name;
    this.setState(state => {
      if (state.username === newName) {
        return null;
      } else {
        return { username: newName};
      }
    });
  };

Breaking change

Deprecated PropTypes has been removed and its a separate package, same with React.createClass and react-addons-test-utils. Now React 16 relies on Map and Set, so make sure you still use babel for older browsers that don’t support it natively.

MIT licensed

So much drama happened over Facebook’s licensing for React, GraphQL and other libraries. Many people were concerned about patents. WordPress founder even decided to rewrite admin UI in Vue (currently in React). Worry no more. Facebook announced that React, GraphQL and Jest are relicensed in MIT. Dropping all the patents and now it’s completely open source. More details here.

It’s safe to update to React 16 today, the library is fully backwards compatible except very few breaking changes. React is getting better with every release and quickly is taking over the front end world.