It’s been almost three years since the last major release of React v16 was launched; since then, no new significant versions were launched until October 2020. This version is critical to the future of React, as promised by React’s developer team.

Surprisingly it was mentioned that no new developer-facing features were added, and its primary focus is to make it simple and more comfortable to upgrade React itself. In their words, React 17 is a “stepping stone” release that makes it better to embed a tree managed by one version of React in a tree managed by a different version of React.

Progressive Upgrades

Previously, when you upgrade from older versions, you would update the whole app at once, but it gets more challenging if the codebase was written more than a few years ago and isn’t regularly maintained. Although it’s possible to use two versions of React on the website, this was fragile and created issues with events before React 17.

The developer team is resolving many of those problems with React 17. This means in future versions, you will have more options. The first one is you will be able to upgrade the whole app at once, like before. The second one is new that allows you to upgrade your app piece by piece. To cite an example, You may plan to move much of your app to React 18, but you may want to keep a lazy-loaded dialog or a subroute to React 17.

Changes to Event Delegation

According to React’s Blog,

React will no longer attach event handlers at the document level under the hood. Instead, it will connect them to the root DOM container into which your React tree is Rendered.

Earlier, React attaches handlers to the DOM nodes on which they were declared, but in the latest version, it adds one handler per event type to the document node directly and is called Event Delegation.

In React 16 and earlier, React will have done document.addEventListener() for most events. React 17 would now call rootNode.addEventListener() under the hood.

Source: React’s Blog

With this update in React v17, it is now safe to nest applications that have been developed with various versions of React.

Breaking Changes

1. Aligning with browsers

React made a few slight improvements related to the event system:

  1. The onScroll case no longer bubbles to escape common confusion.
  2. React onFocus and onBlur events have moved to native focusin and focusout events that more closely reflect React's current behavior and sometimes offer additional detail.
  3. onClickCapture now Use Real browser capture, phase listeners.

These improvements match React more directly with browser behavior and boost interoperability.

2. No Event Pooling

Event pooling optimization is removed from the newer version of React because of its confusion, and it does not improve the performance.

In React v17, this code is running as you would expect. The old event pooling optimization has been eliminated so that you can read the event fields anytime you need them.

3. Effect Cleanup Timing

In the new version of React, the timing of the useEffect cleanup function is made more consistent.

In v16, the function runs synchronously, as per the blog:

“In v17, effect cleanup function always runs asynchronously to cite an example, if the component is unmounting, the cleanup runs after the screen has been updated.

4. Constant errors for returning undefined

In react version 16, functions that return undefined always throws an error.

For older versions, React did this for only class and function components, but now forwardref and memo components are added, keeping their behavior compatible with their standard class and function elements. For returning nothing intentionally, null will be returned instead.

Installation

To install React 17 with npm, run:

To install React 17 with Yarn, run:

UMD builds of React via a CDN:

Conclusion

React v17 does not come with new features. Still, it sets a healthy tone for the upcoming versions by directly approaching the update experience precisely and aligning React’s actions more tightly with the latest browsers.

We are an India-based software development agency. Visit us at https://mdtechcs.com