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 the new release here. I’ll divide the changes into 4 different categories for simplicity,
- New features
- Deprecations
- Bugfixes
Let us go over these:
New features
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,
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.
render(
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
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 per the new naming scheme. The following command would find and rename these automatically.
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.
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 that 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 is deprecating this pattern in 16.9 and logging a warning if it’s encountered.
Bug Fixes
- A crash when calling findDOMNode() inside a <Suspense> tree
- A memory leak caused by retaining deleted subtrees
- 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.)