Comments

What’s new in React 16.9?

React

React has released their latest version 16.9, and 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. I had written an article earlier detailing the Problematic React Lifecycle methods going away in 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 <div /> 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.

Resources

To learn more about the new features, deprecations and other bug fixes that has been released in React 16.9, read the official blog post below:

https://reactjs.org/blog/2019/08/08/react-v16.9.0.html

If you are new to React, and want to master it, I highly recommend Mosh’s course on Mastering React. This course will cover everything you need, to be proficient in React.

If you enjoyed this post, share and spread the word. You can follow me on twitter at @AdhithiRavi

Adhithi Ravichandran is a Senior Software Engineer based in Kansas City. She is currently working on building mobile apps using React Native for critical healthcare scenarios. Adhithi is a regular conference speaker at various tech conferences. Adhithi graduated with a Masters degree in Computer Science from the University of Kansas and has been in the tech industry for over 7 years. She has worked on several technologies over the years, and one of her recent favorite is React Native.
Tags: , ,

Leave a Reply

Connect with Me
  • Categories
  • Popular Posts