What’s new on React 16

MIT licensed

So much drama last week regarding the Facebook’s licensing for React, GraphQL and other libraries. A lot of people have raised a lot of concerns over the patenting issues. The biggest reaction on license was with WordPress founder who decided to rewrite admin UI in Vue (currently in React).

http://gph.is/15AETbG

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.

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"));

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.

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

 React 16 portal feature allows you to attach parts of the Component tree inside a different DOM element.

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 beeindex="1">🐝</div>

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

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};
      }
});
  };