6 major changes in React v17.0

On August 10, React published their first ver release for React v17. Although it’s been almost three years since the main React release, surprisingly no new features have been added to the new version. According to the React team, this makes it easier for developers to update new versions of React. But also according to the React team, they are developing some new updates for the later versions of React v17. As we all know, the update v15 -> v16 or v16 -> v17 does not happen too much conflict in the source code. . But if your codebase was developed a few years ago this could cause some problems. The good news from the React team is that they’ll make it easier for us to update to new versions, even with older versions of React. Although there are no new features, there are some changes in React v17. We will discuss some of the major changes in this article.

Installation

As usual, installing React is straightforward. You can use npm or yarn to install it.

Using npm

Using yarn

Alternatively, you can use React through the CDN. What you have to do is add the following code to your index.html file

What are the changes?

React will no longer support event handlers at document level

This means React attaches event handlers to the native DOM container in the React tree. With this change, it’s now easier and safer to use technologies other than React. In addition, managing different components will also be easier.

Changes in the event system

• They fixed the issue with the onScroll event. This issue is the OnScroll callback on the parent that is fired when the child element is scrolled.
• onFocus and onBlur event have switched to using the focusin and focusout event
• onClickCapture can be used to listen to browser phases.

No more Event Pooling

This change is due to its inability to increase performance in new browsers. So you can read the event fields whenever you need it.

Effect Cleanup Timing

With this approach, it will delete all effects before running any of the next.

Likewise, in componentWillUnmount() , the effect cleanup functions will run asynchronously. That means, when the component unmounts, the cleanup will run after the screen is updated.

Errors will consistently return back to ‘undefined’

In previous versions of React, when we returned undefined, it was always an error. But that’s only for components and classes. In React v17, there will also be checking the forwardRef and memo components, which were ignored in previous versions.

Removing Private Exports

In this version of React 17, private exports have been removed With the new version, older versions of React native for web will not be compatible. In fact, “React native for web” is the only project that uses private exports. With this change, they will switch to using a different approach, no longer dependent on private exports.

Epilogue

In addition to these major changes, the React team improved the memory usage of React apps and fixed many of the bugs we found in v16 and below. Please note that this version is still new and it may contain more bugs than previous stable releases. Therefore, it is better not to update the source code of your current projects to this version until the stable version is released. For more information, you can check out the official React 17 documentation

Reference: https://medium.com/better-programming/the-6-major-changes-in-react-v17-0-d14fed5b0529 https://reactjs.org/blog/2020/08/10/react- v17-rc.html