Learn about React v16.9 updates

For all the ReactJS folks out there, the 16.9 build of ReactJS is out for you to grab and start coding. But, before that, let us just dive into the details of new release here. I’ll divide the changes into 4 different categories for the simplicity:

1. New features
2. Deprecations
3. Bugfixes

Let us go over these ones:

New features

1.   Async act() for Testing: A new testing utility called ReactTestUtils.act() was added in the React 16.8 version. This helped in testing the application by matching the browser behavior. Follow this link for more details on act(). One limitation with this utility was that it was supporting only synchronous functions. Because of this, you might have seen a warning like this in a test which couldn’t be easily fixed. Click here for details about this issue on Git.

With 16.9, act() now accepts asynchronous functions as well, and now you can await its call like this:

2.   Measure performance with <React.Profiler>: In the React 16.5 version, a new React Profiler was added to the React DevTools. The profiler helped developers to identify the performance bottlenecks in the application. But, the limitation with the profiler was that it was a non-programmatic way to gather metrics as a developer has to enable and record the profiling in the browser DevTools window. In the new version, a programmatic way has been introduced to gather the metrics through the component called <React.Profiler>. A profiler can be added anywhere in the React tree. Here is the sample code to add profiler to your existing app:

The profiler requires two properties i.e. an id as well as an onRender callback function that would fire every time a component within the tree is updated and caused a re-render. Click here for more details about profiler. And because applying profiler on an app is overhead, they remain disabled in the prod build by default.

Deprecations

1.      Renaming Of Unsafe Lifecycle Methods

React team announced last year that some of the lifecycle methods are identified to be unsafe and thus developers are discouraged to use these. In React 16.9, these methods have been renamed and deprecation warnings added for these methods. Here are the methods that have been deprecated and renamed:

componentWillMount → UNSAFE_componentWillMount

componentWillReceiveProps → UNSAFE_componentWillReceiveProps

componentWillUpdate → UNSAFE_componentWillUpdate

In React 16.9, these are not breaking changes but, you get an idea that these methods will be removed completely from React 17.x version. However, methods renamed as per the new naming scheme would keep working with 17.x version as well. If you are using these methods in your app already, you have 2 choices here:

Use alternative methods

or rename these to as per the new naming scheme. The following command would find and rename these automatically

2.      No more javascript: URLs

URLs starting with javascript: have been considered dangerous for long because it’s easy to accidentally include the unsanitized output in a tag like <a href> and create a security hole. In the new version, though it will continue to work with a warning logged, in version 17.x these will be converted to an error.

3.      No More 'Factory' Components

React had support for a 'factory' component that returns an object with a render method:

The factory pattern is when you have a creator class handles creating new classes for you rather than instantiating them directly. This pattern is confusing because it looks too much like a function component — but it isn’t one. (A function component would just return the <div /> in the above example.)

This pattern was almost never used in the wild, and supporting it causes React to be slightly larger and slower than necessary. So React deprecating this pattern in 16.9 and logging a warning if it’s encountered.

Bug Fixes

1. A crash when calling findDOMNode() inside a <Suspense> tree
2. A memory leak caused by retaining deleted subtrees
3. An infinite loop caused by setState in useEffect now logs an error. (This is similar to the error you see when you call setState in componentDidUpdate in a class.)