What’s New in React 17: No New Features?
Written by Aryan Mittal
Over two years after React 16 was launched, the long-awaited React 17 was released in October 2020. While the update introduced numerous great changes as always, this release is unique because it contains no new developer-facing features. While React 16 added significant features like Hooks and the Context API, React 17 is mostly considered a stepping stone to ease the transition to future releases.
More specifically, the primary purpose of the update was to enable gradual React upgrades. When you upgrade from React 15 to 16 (or, this time, from React 16 to 17), you would usually upgrade your whole app at once. This works well for many apps, but it can get increasingly challenging if the codebase was written more than a few years ago and isn’t actively maintained. And while it’s possible to use two versions of React on the page, until React 17 this has been fragile and caused problems with events.
The React team has fixed many of those problems with React 17. This means that when React 18 and the next future versions come out, you will now have more options. The first option will be to upgrade your whole app at once, like you might have done before. But you will also have an option to upgrade your app piece by piece. For example, you might decide to migrate most of your app to React 18, but keep some lazy-loaded dialog or a subroute on React 17.
This doesn’t mean you have to do gradual upgrades. For most apps, upgrading all at once is still the best solution. Loading two versions of React — even if one of them is loaded lazily on demand — is still not ideal. However, for larger apps that aren’t actively maintained, this option makes sense to consider, and React 17 lets those apps not get left behind.
There were still a number of changes made to the React ecosystem with the release of React 17.
Changes to Event Delegation
In React 17, React will no longer attach event handlers at the document level under the hood. Instead, it will attach them to the root DOM container into which your React tree is rendered.
In React 16 and earlier, React would do document.addEventListener() for most events. React 17 will call rootNode.addEventListener() under the hood instead.
This fixes numerous problems that were related to integrating React with non-React code.
New JSX Transform
React uses a compiler like Babel or TypeScript to transform JSX code into regular JavaScript since most browsers don’t understand JSX out of the box. The React team worked with Babel to offer a new, rewritten version of the JSX transform with a couple benefits:
You can use JSX without importing React.
May slightly improve the bundle size.
This upgrade will not change the JSX syntax, so your old code will continue working.
useEffect Cleanup Timing
React’s useEffect hook accepts a cleanup function as a return value, which runs when the component unmounts to help prevent memory leaks. Here is some sample code demonstrating a useEffect hook with a cleanup function:
Earlier, the cleanup function would run synchronously once the component was supposed to be unmounted. This could cause issues if the cleanup function started an animation or API request, but the component was unmounted before it was finished. In React 17, the cleanup would run asynchronously, which solves this problem and results in better performance.
Great article Aryan, I was wondering how migrating to the new React version would work but you answered all my questions.
ReplyDelete