Codementor Events

What’s new in React v17.0?

Published Aug 04, 2021
What’s new in React v17.0?

There are no new developer-facing features in the React 17 release, which is rare. Instead, the focus of this release is on making React's upgrade process easier. This version makes it very easy to combine React into apps built on other technologies.
Let’s take a look at the new upgrades in RectJS point to point.
It will no longer attach event handlers at the document level. Alternatively, they’ll be attached to the root DOM container where the react tree is rendered.
const rootNode =
document.getElementById( ‘root’ );
ReactDOM.render(<App />, rootNode);
In React v16 and earlier, React would do document.addEventListener() for almost every event. Where in React 17 will call rootNode.addEventListener() inside the code.
React 17 supports the new JSX Transform which is completely optional. The classic JSX transform will continue to work where it will not stop supporting it.
Here in React 17, there are few small changes related to the event system such as onScroll events will no longer bubble to keep the common confusion away. The onFocus and onBlur events in React have switched to using the native focusout and focusin event inside it. This is quite a match to React’s existing behaviour and it will also offer extra needed information sometimes.
It is quite astonishing that the Capture phase such as onClickCapture will now use the capture phase listener of the real browser. These changes align React with the browser in a better way that improves interoperability and browser behaviour.

Note: Although the onFocus event in React 17 has transitioned from focus to focusin beneath the hood, the bubbling behaviour has not changed. No matter what happens, onFocus has always bubbled, it will continue to do so in React 17 and in future.
No “event pooling” will be done in React v17. It has no effect on performance in current browsers and even puzzles seasoned React users:

Function handleChange(e) {
setData(data => ({
...data, 
// crashes in earlier version of React 
Text: e.target.value
}));
}

This is because, in order to improve performance in older browsers, React reused event objects between events and set all event fields to null in the interim.

These are some of the major improvements that took place in the new version of React 17.
This is all for today! Was it helpful for you or not?
Drop us a comment and let us know what you think.

Discover and read more posts from Pritesh Modi
get started