React 16.9 releases with an asynchronous testing utility, programmatic Profiler, and more

Yesterday, the React team announced the release of React 16.9. This release comes with an asynchronous testing utility, programmatic Profiler, and a few deprecations and bug fixes. Along with the release announcement, the team has also shared an updated React roadmap.

https://twitter.com/reactjs/status/1159602037232791552

Following are some of the updates in React 16.9:

Asynchronous act() method for testing

React 16.8 introduced a new API method called ‘ReactTestUtils.act()’. This method enables you to write tests that involve rendering and updating components run closer to how React works in the browser. This release only supported synchronous functions. Whereas React 16.9 is updated to accept asynchronous functions as well.

Performance measurements with <React.Profiler>

Introduced in React 16.5, React Profiler API collects timing information about each rendered component to find performance bottlenecks in your application. This release adds a new “programmatic way” for gathering measurements called <React.Profiler>. It keeps track of the number of times a React application renders and how much it costs for rendering. With these measurements, developers will be able to identify the application parts that are slow and need optimization.

Deprecations in React 16.9

Unsafe lifecycle methods are now renamed

The legacy component lifecycle methods are renamed by adding an “UNSAFE_” prefix. This will indicate that if your code uses these lifecycle methods, it will be more likely to have bugs in React’s future releases.

Following are the functions that have been renamed:

‘componentWillMount’ to ‘UNSAFE_componentWillMount’

‘componentWillReceiveProps’ to ‘UNSAFE_componentWillReceiveProps’

‘componentWillUpdate’ to ‘UNSAFE_componentWillUpdate’

This is not a breaking change, however, you will see a warning when using the old names. The team has also provided a ‘codemod’ script for automatically renaming these methods.

javascript: URLs will now give a warning

URLs that start with “javascript:” are deprecated as they can serve as “a dangerous attack surface”. As with the renamed lifecycle methods, these URLs will continue to work, but will show a warning. The team recommends developers to use React event handlers instead.

“In a future major release, React will throw an error if it encounters a javascript: URL,” the announcement read.

How does the React roadmap look like

The React team has made some changes in the roadmap that was shared in November. React Hooks was released as per the plan, however, the team underestimated the follow-up work, and ended up extending the timeline by a few months.

After React Hooks released in React 16.8, the team focused on Concurrent Mode and Suspense for Data Fetching, which are already being used in Facebook’s website. Previously, the team planned to split Concurrent Mode and Suspense for Data Fetching into two releases. Now both of these features will be released in a single version later this year.

“We shipped Hooks on time, but we’re regrouping Concurrent Mode and Suspense for Data Fetching into a single release that we intend to release later this year,” the announcement read.

To know more in detail about React 16.9, you can check out the official announcement.

React 16.8 releases with the stable implementation of Hooks

React 16.x roadmap released with expected timeline for features like “Hooks”, “Suspense”, and “Concurrent Rendering”

React Conf 2018 highlights: Hooks, Concurrent React, and more