A few weeks ago, the React team released the library’s latest version, React v17.0 RC. In this post, we will look into the new changes and updates this new release shipped with.

React is a declarative, efficient, and flexible JavaScript library for building user interfaces, and it’s inarguably one of the most popular JavaScript libraries around. It has more than 156,000 stars on GitHub and one of the most vibrant frontend communities building great applications.

UX for upgrading versions and the road to v18

This new version is unique in that it does not ship with any visible new features. Instead, it is fully focusing on the upgrade experience of React as a whole.

Since React came into existence, there has always been a new version setup process, wherein you have to choose whether to upgrade your version to use new features or continue using older versions, without any in-between. For instance, the Context API has been deprecated, and even though most React apps do not use it, React still supports it.

There have been ongoing debates around continuing support or leaving behind apps that use old versions. So moving forward, this upgrade strategy was re-imagined to be more inclusive of older versions, and as such, the new version 17 enables gradual React upgrades.

The React team basically tried to ensure that, moving forward, upgrading from one React version to another is easy and seamless. With version 17, you get a stepping stone to ensure that, for example, it is even safer to embed a tree you manage in one version inside another tree managed by an entirely different version.

This is simply about providing more upgrading options because before now, if you upgraded from one React version to a newer one, it would upgrade the whole app. In some instances where you can have two versions of React in the same project, it causes a lot of issues with events.

When React 18 comes out, for instance, upgrading from a version like 17 will give you options for both a full app upgrade or a gradual one. If you choose the gradual, your app will be upgraded piece by piece — for example, upgrading most of an app to React 18 and keeping a dialog component on version 17.

This may not be the ideal route, but it will come in handy for developers that maintain large projects, and this new version will ensure these apps are no longer being left behind.

Changes to event delegation

React processes event handlers in such a way that if you put one inline on a button like this:

<button onClick={handleClick}>

The vanilla JS equivalent on compile will look like this:

myButton.addEventListener('click', handleClick);

React then attaches one handler per event type to the document node directly, as opposed to attaching it to the DOM nodes on which they were declared. This is called event delegation, and it is very beneficial for large apps and processes like replaying of events.

Considering the gradual upgrades we just talked about in the last section, nesting apps built with different React versions also had to be reimagined. In this new version of React, event handlers will no longer be attached at the document level; rather, they will be attached to the DOM container where the tree was rendered.

const rootNode = document.getElementById('root');
ReactDOM.render(<App />, rootNode);

With this change in place, it is now quite safe to nest apps built with different versions of React, although this will start from version 17 and above.

#react #javascript #web-development #programming #developer