It’s been some time since released . The new release has a lot of new features to facilitate the designing of robust components and enhancements to speed up the rendering pipeline. Facebook React 16 16 is supposed to be completely backwards compatible with React 15. As stated in the official React 16 - React blog post If your app runs in 15.6 without any warnings, it should work in 16. React 16 also ships with the new . If you haven’t followed the news as to why the React team has switched to the new license, be sure to read . MIT license this article Talking about it’s stability, the React team has been serving the production build of React 16 to and . Despite the new feature additions, it is lesser in size as compared to the previous release. Facebook Messenger 32% Now without wasting any more time, let’s talk about the features of React 16. Fragments and Strings React 16 gives you the ability to return elements in an from the render method. array render() {return [<h1 key="1">This is h1</h1>,<h2 key="2">This is h2</h2>,<h3 key="3">This is h3</h3>];} That means, for the most part, you wont be required to perform mapping of array elements inside your render methods. Simply return the array and it’ll render just fine. The only downside here is that it still expects a value to be added to every array element in order to work. key I feel it’s not that big of an issue, plus the React team has assured that the future release of React will most probably have this requirement removed. Even and can be returned from the render method now. strings numbers render() {return “Just a string”;} Previous versions of React used to throw this error - Strings and numbers cannot be returned from the render method in React 15 As you can see, only valid React elements were allowed to be returned from the render method. With React 16, the render method can return -- React elements- Strings and numbers- Portals- Null- Boolean expressions and are rendered as regular in the DOM, and as you would’ve guessed, renders nothing. Strings numbers text nodes null React 16.2 was released on November 28th, which has improved support for returning multiple children (aka Fragment) from a component’s render method. More info on the same can be found on the official . UPDATE : blog post Error Boundaries Error Boundaries help you to catch run time errors in your app and allow you to render a fallback UI. When an error occurred, previous versions of React used to leave your app in a broken state. In order to tackle this, React 16 provides a brand new lifecycle hook called which helps you to catch run time errors. componentDidCatch, Error Boundaries capture errors , which means if an error occurs in any of the child components within that Error Boundary, then the componentDidCatch lifecycle method of that particular Error Boundary will fire. inside their subtree componentDidCatch(error, info) {// Render fallback UI// Log error} componentDidCatch returns two parameters - an object which gives you the stack trace, and an object, which gives the component stack data. error info How Error Boundaries work How Error Boundaries work Few things to note here - Errors in can be caught by an Error Boundary, including the method. all lifecycle methods constructor An Error Boundary cannot catch an error within itself. If an Error Boundary fails for some reason, the error will propagate to the closest Error Boundary above it. Here’s an example on how to create and use an Error Boundary - In the above example, when an error is thrown in the component (line no 17), the componentDidCatch lifecycle method of the component fires (line no 33). Based on that, we change the state and render a fallback UI in it’s place (line no 38). Child Parent What happens when an error occurs ? Once an error occurs, and are logged to the console, and the component tree is unmounted from the root. This prevents from showing corrupted data to the user. error stack trace component stack data Error stack trace returned by an Error Boundary Component stack data returned by an Error Boundary But is there really a need to unmount the whole React component tree ? Well, the React team has debated this decision, and in their experience it is worse to leave corrupted UI in place than to completely remove it. Read more about it . here Portals Portals let you render or teleport a child node into a different DOM node hierarchy. render() {return ReactDom.createPortal(child, node);} The first argument passed to a portal is a component, which is any renderable entity (what the render method supports) and a , to which the child is mounted. child DOM node Portals can typically be used to render hovercards or modals, where the content is to be shown in a visually different and non-contained fashion, out of it’s parent. How Portals work How Portals work The above illustration shows the process of creating a portal in order to render a component from DOM hierarchy 1, into DOM hierarchy 2 via the node. Text modal The component creates a portal which mounts the component to a different DOM hierarchy. Modal Text Here’s the code for the above example - Event Bubbling in Portals Event Bubbling in Portals works the same way as it does for normal React components regardless of it’s position in the DOM tree. An event fired from inside a portal will propagate to ancestors in the containing React tree, even if those elements are not ancestors in the DOM tree. In this case, the button in the Modal component has no handler, so once a user clicks on that button, the event propagates to it’s ancestor in the component tree, and the handler of that component fires. onClick onClick Custom DOM attributes With React 16, you can pass custom attributes to your React components. In the past, React used to ignore unknown DOM attributes. If you wrote JSX with an attribute that React doesn’t recognize, React would just skip it. But React 16 allows them to be added to the component. render() {return <div data-attr="10" attr="20">App</div>} Custom DOM attributes in React 16 Note that you should still use the canonical React naming for known attributes - Canonical naming convention in React Attributes whitelist Previous versions of React used to have an attributes whitelist, which contained a list of attributes that React can recognize and allow them to be added to components. Attributes whitelist in React 15 React 16 gets rid of this, so there’s no more attribute matching with the whitelist resulting in smaller file sizes. render() {return <div custom-attr=“20">App</div>} React 16 support for custom attributes Custom attributes are handy if you need to use a non-standard attribute, or if you need to integrate with a third-party library that relies on such attributes. Just like before, React 16 also lets you use and attributes with your components. data- aria- New core architecture React 16 has an entirely re-written architecture codenamed Fiber. Async rendering The new core algorithm is completely backwards compatible and is based on a system. Events are streamed based on priority and are scheduled to be rendered by the browser, and this method does not block the main thread. priority scheduling Events such as are considered to be high priority events, where the user needs to get realtime feedback, others such as are considered low priority events. typing ajax The scheduling system makes heavy use of the API. requestIdleCallback This method queues a function to be called during a browser’s idle periods. This enables developers to perform background and low priority work on the main event loop, without impacting latency-critical events such as animation and input response. In browsers where this API is not supported, React provides a polyfill. If you want to know more about how Fiber works, I would definitely recommend you to check out this by Lin Clark, or read about the details in this by the React team. talk blog post Improved server-side rendering The server-side renderer in React 16 has also been re-written. It is said to be . 3x faster It provides faster streaming of components down the wire, to the client. The new packaging strategy (which is facilitated by the ) gets rid of checks, which are really slow. Rollup module bundler process.env React 16 supports streaming of components via the new API. Feel free to check out the for more details. renderToNodeStream documentation of ReactDOMServer One of the core React team members, Sasha Aickin, wrote a great about React 16’s SSR improvements. article As stated in the blog post - When comparing against React 15 with process.env compiled out, there’s about a 2.4x improvement in Node 4, about a 3x performance improvement in Node 6, and a full 3.8x improvement in the new Node 8.4 release. And if you compare against React 15 without compilation, React 16 has a full order of magnitude gain in SSR in the latest version of Node! SSR improvements in React 16 Reduced file size Despite all the new feature additions, React 16 is actually as compared to 15.6.1! smaller Reduced file size in React 16 The size difference is partly attributable to a change in packaging. React now uses to create flat bundles for each of it’s different target formats, resulting in both size and runtime performance wins. Rollup Installation You can get started with React 16 right away, it’s available on NPM and Yarn. npm install --save react@^16.0.0 react-dom@^16.0.0 yarn add react@^16.0.0 react-dom@^16.0.0 Detailed installation instructions can be found . Details on deprecations and breaking changes can be found . here here I also presented a talk on React 16 sometime back, you can check out the deck , which Dan Abramov himself 😄 here retweeted That’s it for now! If you liked the article, don’t forget to give it a few 👏 Also, feel free to follow me on , and . Medium Twitter GitHub Thanks!
