What's New Features in React 16.9?

What's New Features in React 16.9?

React has released their latest version 16.9, there are some new features that come with it. We know that React 17.0 is going to be their next big release and we are all waiting for it. This release is a precursor to that. So let’s start with the new features that are introduced with this release.

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 _

_instead. With this release, they are getting rid of the factory components.

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

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Hire Web Developer

Looking for an attractive & user-friendly web developer? HourlyDeveloper.io, a leading web, and mobile app development company, offers web developers for hire through flexible engagement models. You can **[Hire Web...

ReactJS Web App Development Services

We provide top-notch ReactJS development services to global clients. Hire expert ReactJS developers from top React JS development company, Skenix Infotech.

Why Web Development is Important for your Business

With the rapid development in technology, the old ways to do business have changed completely. A lot more advanced and developed ways are ...

Important Reasons to Hire a Professional Web Development Company

    You name the business and I will tell you how web development can help you promote your business. If it is a startup or you seeking some...

Hire Dedicated eCommerce Web Developers | Top eCommerce Web Designers

Build your eCommerce project by hiring our expert eCommerce Website developers. Our Dedicated Web Designers develop powerful & robust website in a short span of time.