New Features in React 16.9.0

In this post, you will be introduced to the newest version of React.js and all the deprecations that come with it, as well as general news about the future.

React is one of the most popular JavaScript libraries around, with over 110,000 stars and over 2 million people using it on GitHub. A host of dedicated community members makes life easier for developers, building an amazing user interface that has released the newest version: 16.9.0 (React now has over 100 releases).

Today we are releasing React 16.9. It contains several new features, bugfixes, and new deprecation warnings to help prepare for a future major release.  — React Blog

Now let us look into these new features:

Async Act()

In the last major release of React.js, a new testing utility was shipped. It is called act() and it helps developers write tests that match the various browser behaviors better.

A good example is how multiple state updates inside a single act get batched, matching normal React behavior for handling browser events. In React 16.8, the only act support was for synchronous functions and there were some warnings that still showed up while using it. But now in this new version 16.9 there is support for asynchronous functions, so you can await the act calls.

await act(async () => {  // ...});

Fixes for the previous warnings were also included in this version, so all your warnings will disappear as you update your React version.

Also the React team has invested some time into creating resources to help developers fully understand how to write tests with act() with the new testing recipes guide. It contains common use cases and how act() can be used in each to write tests. The examples make use of DOM APIs, but you can also use the React testing library.

Performance Measurements with Profiler API

The Profiler API for DevTools first got shipped in the 16.5 React version. It helps developers find difficulties in your web application. In this new 16.9 version, the React team has gone a step further to enhance the API.

With the new <react.profiler> you can measure a host of things programmatically yourself in the DevTools on DOM render from the phase to the times and even durations and interactions. It is ideally meant for larger applications to constantly check their performance and regressions over time. The Profiler is essentially a measuring tool for renders and it identifies the parts of your app that cause sluggishness and should benefit from memoization.</react.profiler>

A Profiler looks like this:

render(  <Profiler id="application" onRender={onRenderCallback}>    <App>      <Navigation {...props} />      <Main {...props} />    </App>  </Profiler>);

You can learn more about them and the parameters passed on render or call backs here in the official documentation.

It is important to note that they are disabled for production environments by default due to the additional overhead. If you want production profiling, then you can check out this resource where React provides a special production build with profiling enabled.

Renaming Unsafe Lifecycle Methods

Sometime last year in an update, the React team informed us of a decision to change the names of lifecycle methods that were deemed unsafe.

The lifecycle methods affected are listed below:

• componentWillMount → UNSAFE_componentWillMount
• componentWillReceiveProps → UNSAFE_componentWillReceiveProps
• componentWillUpdate → UNSAFE_componentWillUpdate

Do not panic: Your old application will not break with this particular update, as the old names still work. However, whenever they are in use, there will be a warning in your terminal:

The warnings will send you links to resources for alternatives to these unsafe methods, but you can just run a simple codemod script that goes into your application and automatically renames all the unsafe lifecycle methods:

cd your_projectnpx react-codemod rename-unsafe-lifecycles

Running this codemod will replace the old names like componentWillMount with the new names like UNSAFE_componentWillMount:

Moving forward, the React team promises that the unsafe methods will keep working on this update and even in version 17 soon to come. The prefix will enable developers to be constantly be reminded of their safety.

Removal of JavaScript URLs

It is a very old practice to use the javascript: inside the href attribute, but it is still done today. The React team has found it to be an unsafe practice, as it can open up security holes in your web applications.

const userProfile = {  website: "javascript: alert('you got hacked')",};// This will now warn:<a href={userProfile.website}>Profile</a>

In this new version of React, if you still use it, you will see warnings on your terminal to remind you that it is prone to vulnerability, and a solution like using event handlers is also suggested. In the future, however, this practice will be deprecated and so will throw an error.

Factory Components

This will not affect a whole lot of people, as it is not widely used, but during React compilation, factory components that return an object with a render method were supported; that was before Babel.

function FactoryComponent() {  return { render() { return <div />; } }}

However, it is a confusing pattern, as it can be used in place of function components that return a template value instead. This support is also responsible for a little bit of the slowness React experiences during compilation, so it is being deprecated. A warning will be logged when you use it, and a great alternative should be adding:

FactoryComponent.prototype = React.Component.prototype

In your file, you can also convert it to a class or a function component.

Future Plans

These are a few things to look forward to from the React team in the near future:

1. There is a plan to release support for both Concurrent Mode and Suspense for Data Fetching in a single combined release instead of as single updates soon.
2. The team has started working on a new Suspense-capable server renderer, but it will not be out with the release above. However, a temporary solution that lets the existing server renderer emit HTML for Suspense fallbacks will be out with it.

Upgrading Your Version

React v16.9.0 is available on the npm registry. To install React 16 with Yarn, run:

yarn add react@^16.9.0 react-dom@^16.9.0

To install React 16 with npm, run:

npm install --save react@^16.9.0 react-dom@^16.9.0

You can also use UMD builds of React through a CDN:

<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script><script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>

Conclusion

You have been introduced to the new React release and all the new features it ships with. As we wait for the next major version, 17, we also learn that a few important deprecations have been made in this minor version and you should take note of them. What is your favorite feature?