React 17 & Webpack 5

…newest version of react in oct’2020

React 17 is was advertised as a No New Feature release. However, you can find several high-impact improvements to React core. Out of these, the changes for JSX is quite noticeable.

Ideally when you upgrade from React 16 to 17, you must upgrade the whole project at once.

However, from React 17 onwards, there will be two upgrade options. Hereafter, you can decide to upgrade the entire project at once or in parts to the latest version.

Besides, there are many other changes in React 17 like New JSX Transform, Effect Cleanup Timing, Native Component Stacks, and you can find more about those in their documentation.

React 16 project that uses TypeScript.

Visible Changes for Developers

A superficial examination of React 17 is sure to keep you unimpressed. The real exciting stuff is not new features but in the way React gets compiled.

To understand these better, let’s look at the compiled code of JSX in a component that uses an older version of React.

Before React 17

You might notice that the compiled version use React.createElement, where the React dependency should be available in the scope. That’s why you need to import React in the first place in each of the components.

Now let’s take a look at how it works with React 17.

With React 17, you don’t need the React import for JSX

I hope that gives a clue that the compiled version doesn’t require the React import. As you can see in the following image, the React 17 compiler imports a new dependency from react/jsx-runtime, which handles the JSX transformation.

New JSX Transform with React 17

So as developers, once you upgrade to React 17, you can remove the React imports from your component’s code if it’s only there for JSX.

But is that the only change, and does it matter?

As you have already noticed, the effect seems irrelevant from the outside.

It’s important to understand that the overall effect will be visible when you have more React components in your codebase

To better understand the impact, let’s look at why removing the dependency with React.createElement matters for JSX.

Benefits from Removing React.createElement

Reducing the Bundle Size

With the removal of React import, your compiled bundled output will become slightly less in size. I hope it becomes evident since we need to remove React import from each of the components where the compiler replaces it with a submodule in React, as shown below.

import {jsx as _jsx} from 'react/jsx-runtime';

What else should I know as a Developer?

Well, it’s none other than the deprecation notices. There were a few notices that you should be aware of with React 17 JSX changes.

Deprecate ‘module pattern’ Components

const Foo = (props) => {
return {
onClick() {
//...
}
render() {
return <div onClick={this.onClick.bind(this)} />;
}
}
};

However, it is easier to upgrade by doing the two changes mentioned below.

  1. Use function expression instead of arrow function.
  2. Add a prototype with a isReactComponent to tell React to differentiate between classes and function components.

The result looks follows.

function Foo(props) {
return {
onClick() {
//...
}
render() {
return <div onClick={this.onClick.bind(this)} />;
}
}
};
Foo.prototype = { isReactComponent: true};

Similarly, there will be Deprecation Notices for;

  • Deprecate defaultProps on function components.
  • Deprecate spreading key from objects.
  • Deprecate string refs (and remove production mode _owner field).

You can read about them in the same link create-element-changes under the Detailed design section.

However, these warnings aren’t a show stopper for you to migrate to React 17. You will also have time till the next major version to upgrade them

Experience with Front-end Technologies and MERN / MEAN Stack. Working on all Major UI Frameworks like React, Angular.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store