Skip to main content

What’s New in React 17: No New Features?

 

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.


  1. 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.


  1. 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.


  1. 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.


Labels:

Comments

  1. AnonymousJune 15, 2021 at 10:15 AM

    Great article Aryan, I was wondering how migrating to the new React version would work but you answered all my questions.

    ReplyDelete

Post a Comment

Popular posts from this blog

React - Uncaught TypeError: destroy is not a function

Written by Aryan Mittal While experimenting with useEffect hooks in React and React Native, I came across the following error: Uncaught TypeError: destroy is not a function and my app was unable to run. After debugging and searching around, I found the cause and how to solve it. A simplified version of my code looked like this: The key here is that myFunction is async and the shorthand arrow function syntax I used. The reason the simple code above was crashing my app is due to how the useEffect hook, async functions, and the shorthand arrow function syntax works. One feature of the useEffect hook is a cleanup function. If you return anything from the useEffect hook function, it must be a cleanup function. This function will run when the component unmounts. This can be thought of as roughly equivalent to the componentWillUnmount lifecycle method in class components. In JavaScript, functions marked with the async keyword enable the use of the await feature, which lets developers paus...
Post a Comment
Read more

Achieving the iOS “glass” blur with React Native

Written By: Aryan Mittal Perhaps the most common component in every mobile app is the header. It tells your user where they are in your app, and it’s at the very top of the screen. So, it’s crucial to have a polished and native-feeling header in your React Native apps. I use the React Navigation library for Voluntime ’s mobile app, and I wanted to achieve the iOS “frosted glass” blur effect that Apple is known for. Most of Apple’s iOS apps utilize the blurred header, including Settings, the App Store, Notes, and Reminders. It gives the user a hint about what’s hiding behind the header, and it makes the app feel polished and thought out. Since I was using React Navigation, I started by searching for “react navigation blurred header” on Google. The results recommended writing your own custom header or installing additional libraries to achieve the blur effect. This wasn’t something I wanted to do for such a small change, so I dug deeper into React Navigation’s documentation. Finally, aft...
1 comment
Read more

Calculating the number of business days between dates in Python

Written By: Aryav Nagar Calculating the number of business days between varying lengths of time, even excluding federal holidays, may seem like a tricky problem to solve, but the solution is quite simple. While developing Stockscast , an AI-based stock market forecaster, I came across this issue as I needed to find the number of days the stock exchange would be open throughout the year. The solution I found involved the use of pandas.tseries.holiday.USFederalHolidayCalendar() and pandas.tseries.offsets.CustomBusinessDay() functions are found in the Pandas library. By creating a custom calendar, using the CustomBusinessDay function, with the frequency of USFederalHolidayCalendar , we can create a calendar excluding both weekends and federal holidays. Next, find the length of time you want to calculate the number of business days in. In my case, I needed to find the number of business days between one week, one month, three months, six months, and one year from now. Finally, w...
Post a Comment
Read more