Learn About The New Features of React 16

0
216
React 16

React 16 was announced on 26 September 2017 by Facebook, who is working on this new version of React, called React 16. This is a major release for the React Community and the latest version, named “Fiber” offers new changes, features, deprecation, and so much more. “Fiber” is built on a new architecture and includes changes in error boundaries, fragments, portals, async rendering, for components, animations, DOM updates that makes rendering faster, etc.

If you want to use the new React, then you need to know about the new features and architecture. in this blog, we will start learning the highlights of React16 (Fiber) that you need to know before you upgrade.

1. Error Boundaries

In React 16, componentDidCatch is the new method of catching JavaScript errors within your code. This new version introduces a new concept of an “error boundary”. componentDidCatch makes a class component an error boundary if it defines a new lifecycle method in which the new lifecycle method is known as componentDidCatch method, which makes a class component an error boundary if it defines a new lifecycle method where only one class component can be defined as an error boundary. The component tree will fail to mount if multiple errors occur at the same time. This is the best method for handling the errors, which now need to be handled explicitly or else an error in the rendering process could result in the entire component tree not rendering. The main advantage of error boundaries is that they allow you to give a better user experience when something goes wrong to handle runtime errors effectively within the component. You can find an example are given below:

componentDidCatch

As a regular component, you can easily use this Error Boundary method now:

Error Boundary

2. Portals

Portals are a very cool feature which allows users to target and render components. The portals provide a clean mechanism in the front-end development, where there is a situation that we want to control or effect – an element which is not in our main application DOM hierachy such as chat widgets, modals dialogues, overlays, etc. Portals in React 16 is the new concept and its gives permission to render children in any of the DOM mode. Portals give a great way to render children into a DOM node that will exist outside of the parent component hierarchy DOM. Please check the example given below:

Render

3. Fragments

In React 16, there is a common pattern if you want to return multiple elements. Fragments will help you group a list of children without adding extra nodes for the DOM. Now, we can easily return an array of elements with this new feature.

Please check the example are given below in HTML:

Heading

React 16 decided to change things up by offering support for returning an array of elements from a component’s render method. Instead of having to wrapping the children elements in a DOM element, you can now add them directly into an array.

Return

However, this was a bit confusing when compared to normal JSX such as requiring extra commas for separation, a key to avoid React’s key warning and also needing quotation marks for adding strings. To provide a more consistent approach to this issue, React now offers an upgraded Fragment component, which can be used in place of arrays.

Fragment

You can easily use this component without having to make any changes and even without requiring quotes, keys, and commas.

4. Asynchronous Rendering

Another amazing update in the latest React is the new reconciliation algorithm, that aims to improve performance and responsiveness. The Reconciliation (also known as the Virtual DOM), refers to the process of React finding the differences between the previous state and the next state of your application and making the necessary changes before re-rendering the DOM.

In the older versions of React, the main thread would be blocked while the updates were being made, resulting in some apps to feel laggy. Originally React used the ‘stack reconciliation’ approach, which was a synchronous process that required all updates to be completed entirely before it could return to the main thread.

In the new approach, referred to as Fiber Reconciliation, updates are allowed to be rendered asynchronously by creating small chunks that can be paused to check if the main thread has any new changes that need to be performed before it goes back to synchronization.

5. Browser Compatibility

React 16 works on the map and set collection types; however, these types are not supported natively in the older browsers or devices. So, if you have an app that requires support for older environments, then use can use a polyfill, such as core-js or babel-polyfill, to maintain compatibility.

This is what a polyfilled environment for React 16 using core-js will look like:

Hello World

6. Concurrency

React 16 offers concurrency, which allows React to prioritize updates by importance. Inside the coding, each update is assigned a priority level thatdetermines the order in which it is processed. This ensures that high priority updates are given more importance, while low ones can be paused or halted. This create a more fluid UI that does not lag.

Facebook has ensured that the latest version of React creates a more fluid UI experience for not only the users but also the developers. These are just a few of the many features you can get your hands on when you upgrade to the latest version.

LEAVE A REPLY

Please enter your comment!
Please enter your name here