Lang
Blog

Introducing New JSX Transform- All You Should Know About!

ByPayal Mittal
October 1st . 5 min read
Introducing New JSX Transform- All You Should Know About!

Recently, Team React working alongside with Babel has come up with a new feature in the latest React release 17 offering a new JSX in-built transform.

JSX is the Syntax Extension of JavaScript. It looks like HTML but, in fact, is an extension to JavaScript. It is an inline markup language to create React elements and used to describe what UI should look like.

React doesn’t require using JSX, but most people find it helpful as a visual aid when working with UI inside the JavaScript code. It also allows React to show more useful error and warning messages.

In this blog, we’ll be discussing the benefits of new JSX transform and how to use it. Let’s get going-

Why JSX Transform?

As browsers don’t support JSX, it comes down to the compilers like Babel or TypeScript to transform JSX into regular JavaScript which is understood by browsers. However, this need will be overcome by the introduction of new transform which will automatically compile the JSX source code without having to rely upon the typical compilers.

The main benefits of the new JSX transform are:

  • It enables you to use JSX without having to import React.
  • The compiled output relatively improves the bundle size.
  • It lights a path for future improvements where you’ll have only a few concepts to learn React.

Now let’s see how the new transform differs from the older one -

Old vs New JSX Transform

If you recall using JSX, you would know that we need a compiler (like Babel or TypeScript) to run the JSX code in the browser. These compilers transform this JSX into React.createElement calls.

Let’s suppose your code looks like this -

import React from 'react';
function App() {
return <h1>Hello World</h1>;
}

The compilers convert it into regular JavaScript, such as:

import React from 'react';
function App() {
return React.createElement('h1', null, 'Hello world');
}

Your source code is not exactly changing in any way, only it’s been converted in the form that the browser can understand.

However, there are certain limitations of this approach, e.g.-

  • As the compiler is calling the React.createElement function; there is, of course, ‘React’ you will be conferring to. You will have to import React first so that the JavaScript knows what to do with the compiled code.
  • Also, there are certain performance limitations with React.createElement.

However, the new transform solves these issues by introducing two new entry points to use React that can directly be used by the compiler without having to transform the JSX code to React.createElement. Though it’s not a big deal to insert import React from ‘react’ command every time at the top of the JSX files, it is a huge cause of irritation for experts.

But, no more! The new JSX transform in React 17 imports the special functions from these entry points automatically and calls them.

Let’s take an example of the source code -

function App() {
return <h1>Hello World</h1>;
}

The new compiled code will look like this -

import {jsx as _jsx} from 'react/jsx-runtime';
function App() {
return _jsx('h1', { children: 'Hello world' });
}

So, you see? You no longer need to import React. But mind it, you might still need to import React in case you are going to use Hooks or other exports.

How to Upgrade to the New JSX Transform??

If you don’t want to upgrade your existing JSX transform, that’s fine, you’ll not face any trouble using the old transform. But if you do wish to switch to the new JSX transform, here are the prerequisites you will need -

  • React version that supports the new transform (currently it’s v17 RC but soon it will be backported to previous versions like v16.x, v15.x, and v14.x)
  • A compatible compiler

In order to leverage the new transform, you need to make some changes in the tools you’re using, such as -

  • Upgrade Next.js to version 9.5.3 or above
  • Make sure that your Create-React-App is updated to v4.0 (in Beta currently)
  • Update Gatsby version to v2.24.5 or above
  • Upgrade TypeScript to v0.126.0 or above.

If you’re using Babel setup, upgrade it to v7.9.0 or above. If you’re using @babel/plugin-transform-react-jsx, update it as -

npm update @babel/core @babel/plugin-transform-react-jsx
or
yarn upgrade @babel/core @babel/plugin-transform-react-jsx

If you’re using @babel/preset-react, update it as –

npm update @babel/core @babel/preset-react
or
yarn upgrade @babel/core @babel/preset-react

Now, update the babel configuration as given under -

// If you are using @babel/preset-react
{
"presets": [
["@babel/preset-react", {
"runtime": "automatic"
}]
]
}
// If you're using @babel/plugin-transform-react-jsx
{
"plugins": [
["@babel/plugin-transform-react-jsx", {
"runtime": "automatic"
}]
]
}

And that’s it. You got it right.

Removing Unused React Imports

As React will no longer be in scope while you use JSX, it leads to having a lot of imports in your code that are not necessary anymore. Though it does no harm to let them hang around, you can get rid of them at any moment.

You do not have to remove each and every import manually and separately; all you have to do is to use an automatic script called codemod, such as:

npx react-codemod update-react-imports

It will remove all the unused imports at once and change all the by-default imports resulting from import React from ‘react’ to destructured named imports. If you’re using hooks instead, codemod will convert it to a named import. For instance, React.useState will change to useState and import { useState } from ‘react’ command will be added at the top. Also, codemod will aid you with upgraded and future versions of React for supporting ES Modules.

I hope this blog was helpful for you!

Thanks for reading!!

Share:
0
+0