Monday, 30 October, 2017 UTC
Summary
Not too long ago, React made a jump from version 0.14 to 15.0. Following this major jump, the first major version update has arrived. Let’s examine what surprises React 16.0 holds for us.
Gentlemen, Start Your Engines!
Facebook claims they have completely rewritten the engine of React. Beyond asynchronous rendering, maintainability concerns were addressed as well. From now on, it will be a lot easier to add new features to React. You can read more about the rewrite in this post.
Server side rendering has become significantly faster, and it supports streaming.
Thanks to the rewrite, the gzipped file size is now 30% smaller than that of the previous version.
Resilient Error Handling
Error handling has also become more resilient. Earlier, when an error was thrown inside a component, it resulted in the unmounting of the component’s subtree. Error handling has now made it possible to define boundaries for React components, resulting in better, more granular error handling.
Render Return Values
The render method of React components can now return multiple types. We don’t have to wrap our return value into a React element anymore, as React automatically does it for us.
We can return a string or a number, rendering text nodes:
render() {
return 'Text constant';
}
When returning arrays, make sure the corresponding elements have a key attribute.
render() {
return [
<li key="1">Uno</li>,
<li key="2">Due</li>
];
}
Booleans,
null render nothing.Portals
Portals make it possible to render children into a DOM node that is physically outside the DOM subtree of the parent component.
Portals are useful, whenever the child component has to break out from the parent component visually. Examples:
- A modal window placed in a hidden element. The parent component is hidden, but the child component should be visible once the preconditions for showing the modal have been met
- A file uploader, where the child component is a form. As forms cannot be nested, when uploading a file, the file uploader form has to be placed outside the DOM subtree of the main form
Licensing
In conjunction with the license belonging to older versions, I have seen several conspiracy theories on Facebook getting the power to influence or control your company’s assets. Now with version 16.0, this debate is over, as this version is now available under MIT license.
Breaking changes
React 16 should work for you like a charm. The rule of thumb is, if you don’t get any warnings in 15.6, your code should work in version 16.0.
For the list of breaking changes, visit the ReactJs blog.
Also make sure that if you support older browsers, you provide an ES6 polyfill for maps and sets, as version 16 of React depends on these language constructs.