What's New Features in React 16.9?
React 16.9 New Features
Asynchronous act() method for testing
In the previous release 16.8, React introduced a new testing utility function called act(). The act() function was introduced to help write tests that match the browser’s behavior. It helps in writing UI tests, that replicate how React works in the browser. In 16.8, React supported only synchronous act() function.
Although it was very useful, it was hard to get the _act() _function to work well for asynchronous actions. It resulted in warnings like “An update to SomeComponent inside a test was not wrapped in act(…)”.
The good news now is that, with the new release of 16.9, the act() function now supports accepting asynchronous functions.
await act(async () => {
// ...
});
Measure Performance with _<React.Profiler> _
The React Profiler for dev tools was introduced in an earlier version of React in 16.5. With this new release, the React team has added the <React.Profiler>. It is recommended for larger apps, and can gather performance regression measurements over time.
The _<React.Profiler> _can help measure how frequently a React application renders and determine the cost of rendering. The _<React.Profiler> _component requires two properties:
- _id (_string)
- onRender_()_ callback function
The onRender() callback function is called anytime a component within the component tree is updated and triggers a render.
You can learn more about using the Profiler from the official blog post here.
Note: Since the profiler adds some CPU overhead, it is disabled in production. Although it is a light-weight component, it should be used only when needed.
You can read more on how to enable the Profiler on your build.
React 16.9 Deprecations
1. Warning when using old lifecycle names
The React team decided to deprecate some of the unsafe lifecycle methods with the release of React 17. With this 16.9 release, you will notice that as a preparation to React 17, warnings appear when you try to use the old names for the lifecycle methods that were deemed as unsafe.
You can still use the lifecycle methods that are called out as unsafe even in 17.0. But the UNSAFE keyword is added to keep reminding developers that there are alternative methods and patterns that can be used instead of the unsafe lifecycle methods.
Make sure to run the codemod script, that will automatically rename the unsafe methods, if you still wish to use them or don’t have the time to refactor a large codebase.
cd your_project
npx react-codemod rename-unsafe-lifecycles
Running this script will rename the three unsafe lifecycle methods as shown below:
componentWillMount is renamed to UNSAFE_componentWillMount
componentWillReceivePropsis renamed t UNSAFE_componentWillReceiveProps
componentWillUpdate is renamed t UNSAFE_componentWillUpdate
2. Factory Components going away
I have personally never used the Factory components with React. The React team has mentioned that this is not a popular feature either.
function FactoryComponentExample() {
return { render() { return <div/>
The factory pattern that React supported, returned an object with the render() method. Now they have decided to deprecate this completely. The factory component is confusing to developers since it looks a lot like the function component. With function components, you will be returning just the _
In case you are using it in your codebase, you will notice warnings when you run the code. You can add the following code as a workaround.
FactoryComponent.prototype = React.Component.prototype
The recommendation is that you refactor the code that uses the factory pattern with either a class component or a function component.
Again, this is rarely used and you may never encounter this problem.
3. JavaScript: URLs Warnings
Using javaScript: URLs is considered a security threat. Hackers can easily inject JavaScript into your running application and that is obviously not good.
With this release, you will still be able to use javaScript: URLs. But you will receive warnings. Eventually, they plan to completely get rid of it and log errors when there are _javaScript: URLs. _
The React team recommends using React event handlers instead of javaScript: URLs.
#reactjs #javascript #web-development
