All you need to know about React 16 Part-I

“Colorful rolls of scotch tape, scissors and sticky notes on a table” by Jo Szczepanska on Unsplash

Hi everyone, while I was learning all the new React 16 features, I thought of sharing the features with the world. This is the first part of the series in which I will try to explain new React 16 features , their usage and how they are different from the pre React 16 versions. I will cover all the differences in two blog post. Being optimistic for now 😃

Components now can return arrays, string and parallel DOM or React element. Gone are the days when you need to wrap your React element or DOM inside a wrapper DOM element

Here is how you can do it.

One restriction is there when returning array is that you need to add different keys for elements at first level. If you don’t want to have burden of this. Use Fragments.

One gotchas with the keys in React 16 is now , React will render duplicate keys elements as it is. Earlier pre 16 version, React use to pick the first element to render with the same key.

Keys behaviour in React 15.6.2

Keys behaviour in React 16.4.0

Try Catch for React Components : componentDidCatch

There were days when a part of React hierarchy breaks could break full application. A mandatory reload is required to get the page working again. Now with componentDidCatch(error, info) you can catch error in underlying React tree and show a useful message to customers. And other part of React tree will continue to work. Note: It only catches the error in underlying components and not the one in which componentDidCatch is defined. Here is how you can use it.

Now you can wrap your regular components inside ErrorBoundaries components to have a safety check on your UIs.

React Portals: your way to travel any where in the DOM

You can use React Portals to display children DOM elements and React Components any where in the DOM tree without worrying about React hierarchy. It will respond to props or state changes in parent components.There is one gotcha you need to know before you use React Portals is the event bubbling. All though the component is rendered at a new location in DOM, event bubbling will pass through the React tree, instead of DOM tree. And that is useful when portal need to respond on various interactions in React tree. That’s what we need most of the time !!. Here is how you can do it.

Portal feature can be very useful when we want to launch modals, hovers and tooltips. Portals can save a good amount of time when adjusting z-index value for modals, hovers and tooltips. Here is one more example showing the usage of React portals

Here is the working code , posted by Dan Abramov in React documentation.

Example from React Documentation

Improved Server side rendering in React 16

Now with improved server side rendering in React 16, you will have

• Generates more efficient HTML. Earlier React use to add lot of extra text in generated html, which used to increase the bundle size. Now with those stripped of you can have less sizes for generated HTML. Now instead of using render you can use hydrate(<Your app component>, document.getElementById(“root”))
• Can add non-standard html attributes. Earlier it was not supported, due to which some times integration with third party library used to fail. Now with this, you have the complete freedom to add non-standard attributes and tryout new attributes and third party libraries which are dependent on new attributes.
• Well new server side rendering also supports node streaming (https://nodejs.org/api/stream.html). With that server does not have to wait to convert all the html, instead you can get the rendered html in an incremental fashion. This also brings in less load to the server generating the html for your server side.
• hydrate method also try to reuse the dom elements rendered from server side and will not warn for the errors when client side generated HTML and server side mismatches.

Here is how you can use it.

It is how you can use hydrate on client side.

Here is how you can use streaming on server side. Snippet taken from React documentation official website https://reactjs.org/blog/2017/09/26/react-v16.0.html#better-server-side-rendering

That’s it for the phase I , we will looking at other new features in phase II. React team has done a splendid job of documenting changes and usage of new APIs. Most of the changes are done to make React ready for asynchronous rendering which will be coming in future React versions.I highly recommend to go through their blog for upgrades and implementation for React application(https://reactjs.org). They are awesome !!

Let me know whether you liked the article by hitting applause or comments. I will be more happy to discuss the various possibilities with these new features. This is my first tech article on any blogging website. So , if you find any problems with the article please let me know. Namaste !!