DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

This Dot Media
This Dot Media

Posted on • Originally published at labs.thisdot.co on

React.js 17: No New Features and New JSX Transform

React.js 17: No New Features and New JSX Transform

When React.js 17 became available on October 20th, it generated some confusion because it has no new developer-facing features.

Instead, the React Core team focused on making the React library easier to self-upgrade in the future. This means, that if your app is running React 17 and you need to upgrade some features to React 18, you can move your application core to React 18 and lazily load the legacy code without any issues.

Of course, you can still upgrade your entire app the new version at once, which is the recommended version by the React team.

Installation

To install React 17 with npm, run:

npm install react@17.0.0 react-dom@17.0.0
Enter fullscreen mode Exit fullscreen mode

To install React 17 with Yarn, run:

yarn add react@17.0.0 react-dom@17.0.0
Enter fullscreen mode Exit fullscreen mode

Internal improvements

New JSX Transform

One of the greatest internal improvements React 17 has is the new JSX transform. Prior to React 17, when you write JSX code, it was transformed to a React.createElement call.

So, it looked something like this:

import React from 'react'

const App = () => {
  return <h1>Hello World</h1>
}
Enter fullscreen mode Exit fullscreen mode

Was transformed to this:

import React from 'react'

const App = () => {
  return React.createElement('h1', null, 'Hello World')
}
Enter fullscreen mode Exit fullscreen mode

Starting on React 17, you don't need to import React from 'react' anymore. Instead, two new entry points were added to the React package that are intended to be used only by compilers like Babel or TypeScript. So for the above JSX code, the output will be slightly different:

import { jsx a _jsx } from 'react/jsx-runtime'

const App = () => {
  return _jsx('h1', { children: 'Hello world' })
}
Enter fullscreen mode Exit fullscreen mode

So, your app won't need to import React from 'react' anymore. Instead, you can directly write your JSX code:

const App = () => {
  return React.createElement('h1', null, 'Hello World')
}
Enter fullscreen mode Exit fullscreen mode

Next.js was known to allow the above because under the hook, it imported React. However, they changed this in their 9.5.3 release in order to use the new transform.

Updating ESlint rules

If you are using the eslint-plugin-react package, you may notice not importing React will generate an issue. For that, you can just disable those rules while they remove those rules.

eslintrc.json

{
  // ...
  "rules": {
    // ...
    "react/jsx-uses-react": "off",
    "react/react-in-jsx-scope": "off"
  }
}
Enter fullscreen mode Exit fullscreen mode

Removing Unused React Imports

Luckily, the React team has created a codemod you can run to remove your old React imports. To run it, just open a new terminal on your project directory, and run the following script:

npx react-codemod update-react-imports
Enter fullscreen mode Exit fullscreen mode

A new Event Delegation System

To enable gradual updates , the React team changed its internal Event Delegation System, which works like this:

Before React 17, all event handlers were attached at the document level under the hook, so it ran document.addEventListener() for most events.

After React 17, it attached all event handlers to the root element where you render your app, which calls rootNode.addEventListener() instead.

To better understand how the new Event Delegation System works, take a look at this diagram:

New React Event Delegation System

You can take a look at a demo of gradual updates on an example repository put together by the React team.

Other Breaking Changes

There are other minor breaking changes that hopefully won't affect your application. They are mostly internal changes, like the onScroll event no longer bubbling, onFocus and onBlur events switching to use the native focusin and focusout under the hook, removing the old event pooling optimization, and making the effect cleanup timing more consistent.

To go deeper into these other breaking changes, you can take a look at the React v17 RC Breaking Changes.

This Dot Labs is a modern web consultancy focused on helping companies realize their digital transformation efforts. For expert architectural guidance, training, or consulting in React, Angular, Vue, Web Components, GraphQL, Node, Bazel, or Polymer, visit thisdotlabs.com.

This Dot Media is focused on creating an inclusive and educational web for all. We keep you up to date with advancements in the modern web through events, podcasts, and free content. To learn, visit thisdot.co.

Top comments (0)

Stop sifting through your feed.

Find the content you want to see.

Change your feed algorithm by adjusting your experience level and give weights to the tags you follow.