React 16.6.0 releases with a new way of code splitting, and more!

After the release of React 16.5.0 last month, the React team announced the release of React 16.6.0 yesterday. This release comes with a few new convenient features including support for code splitting, easier way to consume Context from class components, and more.

Let’s see what changes have been made in this release:

React.memo() as an alternative to PureComponent for functions

React.memo() is similar to React.PureComponent but for function components instead of class. It can be used in cases when the function component renders the same result given the same props.

You can wrap the function component in a call to React.memo() for a performance boost in some cases by memorizing the result. This will make React skip rendering the component and reuse the last rendered result.

React.lazy() for code splitting components

You can now render a dynamic import as a regular component with the help of React.lazy() function. To do code splitting you can use the Suspense component by wrapping a dynamic import in a call to React.lazy().

Library authors can leverage this Suspense component to start building data fetching with Suspense support in the future. Note that the feature is not yet available for server-side rendering.

Added Class.contextType

In React 16.3 a new Context API was introduced as a replacement to the previous Legacy Context API, which will be removed in a future major version.

React 16.6 comes with contextType, which makes it convenient to consume a context value from within a class component. A Context object created by React.createContext() can be assigned to the contextType property. This enables you to consume the nearest current value of that Context type using this.context. This update is done because developers were having some difficulties adopting the new render prop API in class components.

getDerivedStateFromError() to render the fallback UI

React 16 introduced error boundaries to solve the problem of a JavaScript error in a part of the UI breaking the whole app. What Error boundaries do is, they:

Catch JavaScript errors anywhere in their child component tree

Log those errors

Display a fallback UI instead of the component tree that crashed

An already existing method, componentDidCatch() gets fired after an error has occurred. But before it is fired, null is rendered in place of the tree that causes an error. This sometimes results in breaking the parent components that don’t expect their refs to be empty.

This version introduces another lifecycle method called getDerivedStateFromError() that lets you render the fallback UI before the render completes.

Deprecations in StrictMode

The StrictMode component was released in React 16.3 that lets you opt-in early warnings for any deprecations. Two more APIs are now added to the deprecated APIs list: ReactDOM.findDOMNode() and Legacy Context. The reason these APIs are deprecated are:

ReactDOM.findDOMNode(): This API was supported to allow searching the tree for a DOM node given a class instance. Typically, you don’t require this because you can directly attach a ref to a DOM node. Most uses of this API are often misunderstood and are unnecessary.

Legacy Context: It makes React slightly slower and bigger than it needs to be. Instead of the Legacy Context, you can use the new Context API that was introduced in React 16.3.