React 16.6: with new features for Function components and code splitting


Developers can now perform code splitting with the suspense component. There are also new features for Function and Class components.

Version 16.6 of the JavaScript library React has been released. In the foreground are three features: A variant of PureComponent and shouldComponentUpdate for Function components, code splitting with Suspense and an easier way to record the context of Class Components.

Previously, class components could refrain from rendering if their input props are the same when using PureComponent or shouldComponentUpdate . This is now possible with Function components. To do this, developers must include the component in React.memo :

<span class="notranslate"> const MyComponent = React.memo (function MyComponent (props) {</span> 
 <span class="notranslate"> / * only rerenders if props change * /</span> 
 <span class="notranslate"> });</span>


In addition, the Suspense component now allows code splitting. To do this, users must wrap a dynamic import in a call to React.lazy () . Code splitting is a feature that bundlers like webpack or browserify support. This allows you to create multiple bundles that are then dynamically loaded during runtime. This is to prevent too large bundles restrict the start time of the apps. So far, the new feature is not yet available for server-side rendering. In addition, the suspense component will allow developers to use data fetching with suspense support in their libraries in the future.

In React 16.3, the creators had introduced the Context API as a replacement for the previous Legacy Context API. However, they have received feedback from users that the new Render Prop API may cause difficulties in class components. Therefore, the team decided to add a new API that allows to include the context value from a class component.

A complete list of new features can be found in the announcement in the React blog and in the changelog . The project can be found on GitHub.


Share This:

Powered by FrontNet