React JS is one of the popular most UI technologies used by majority of the web developers now a days. It has released its major 16.0.0 version on September 26, 2017 and its latest major version 16.8.0 came out on February 6, 2019.
Among all the releases of React, React 16 is first version which built on the top of new core architecture called Fiber, which lets React to add more useful features. So in this article we are going to see the most useful features of React 16 with relevant examples.
Error Boundaries (React Version 16.0.0)
Introduction
Error Boundaries are similar concepts like the Try and Catch errors in normal JavaScript codes. It helps us to catch any JavaScript errors in the app component tree and replace them with fall back UI.
When an error occurs,
static method getDerivedStateFromError is defined to get the error from the below components tree and should return a value to update state.
componentDidCatch has two parameters: error, errorInfo.
Here in componentDidCatch could be used to log those errors.
Usage
Only Class Components can be converted as Error Boundaries.
It only can catch errors during rendering, in lifecycle methods and in constructors of the whole tree below them.
It can't catch errors inside the same error boundary itself, event handlers, SSD (i.e. Server Side Rendering) and in Async code blocks.
Context API (React Version 16.3.0)
Description
Context API helps when we need to pass global values to multiple child components at different nesting levels but without intervening the intermediate components.
In above example,
We have Home container and 2 more nested child components (i.e. Header, Button).
Let's consider we want to pass user logged In information from my Home Component to my bottom most child Button Component.
Usually Home Component will pass it as props to my Immediate child Header then it passes down to Button.
But user logged In props passes via Header even though it not using that value.
Hence we used React context API to pass that values directly to required component without affecting the intermediate components.
Usage:
It reduces the data passage on intermediate components those don't use these data.
We need to create context provider and consumer on the respective components to pass and subscribe the values.
React.memo (React Version 16.6.0)
Description
When you want to make your functional component re-renders only there is a change on incoming props then you need to wrap them using React.memo.
Above example,
It shows how to uses React.memo with the functional components.
It contains Home container and 2 more nested child components (i.e. Header, Button).
When you don't wrap your child components using React.memo then every time if Home container renders it triggers the children(Header, Button) rendering even though there is no change on incoming props.
Hence you can make these children components to renders only there is change on incoming props by wrapping them using React.memo.
Usage
It is React's higher order component. (i.e. Component will take another component as input and return enhanced / different component).
It will boost your UI performance by removing unwanted re-rendering of components.
In Class components same can be done using shouldComponentUpdate() or React.PureComponent.
React.Lazy (React Version 16.6.0)
Description
Code splitting is one of the best way to reduce your page loading time by include only the necessary items needed to render current page. React.lazy is one of the way to load your react components dynamically whenever there is need for them.
Above example,
It contains two components. In that whenever we render MyComponent then only ExtraComponent will get loaded. Until that it did’t get imported.
Hence ExtraComponent going to be imported dynamically we should wrap it with Suspense component that will help us to show loader UI if there is any delay on loading ExtraComponent.
Usage:
React.lazy is a function which will take another function as a parameter.
This parameter function must call a dynamic import.
It returns promise that will get resolved with dynamically imported components.
Hooks - useState() (React version 16.8.0)
Description
Hooks are the functions that let us to interact with React state and lifecycle methods. useState is one of React hooks that let us to create and manipulate local states inside the functional components. React will preserves this state in between the re-renders.
Above example,
useState hook will take initial count value as 0 and returns current state value in count variable and method in setCount.
Hence whenever we click button we call the setCount function to update local state count.
Usage:
useState is the function which will take initial state value as a parameter and it returns current state value and function to update it.
Hooks don't work inside Class Components.
Hooks allows our functional components to hook into React state and lifecycle methods