Introducing the New JSX Transform

Introducing the New JSX Transform:- A Leap Forward in React Development

In the fast-paced world of web development, staying up-to-date with the latest tools and technologies is essential. The React ecosystem, known for its vibrant community and frequent updates, has recently introduced a game-changing feature - the new JSX Transform. This transformation brings significant improvements to the way we write and work with JSX, making React development even more efficient and enjoyable.

What's a JSX Transform?

To understand the significance of the new JSX transform, let's first revisit what JSX is. JSX, or Javascript XML, is a system of syntax extension for Javascript commonly used with React to describe the structure of UI components. It allows developers to write HTML-like code directly in Javascript, making it easier to create dynamic and interactive user interfaces.

Let's look at an example of JSX using the new JSX Transform:

export default function App() {
  return (
    <div className="App">
      <h1>Hello, JSX with new JSX transform!</h1>
    </div>
  );
}

Traditionally, JSX code was transformed at runtime using tools like Babel. However, this approach had some limitations, including increased bundle sizes and slower performance. The new JSX Transform aims to address these issues by enabling a more optimized and streamlined compilation process.

Now let's take a closer look at the differences between the old and new transform.

What's Different in the New Transform?

The new JSX Transform brings several improvements to the table:

• Improved Performance:

The new JSX Transform optimizes the transformation process, resulting in faster runtime performance. By removing some of the overhead associated with the previous transformation process, your React applications will load and render more quickly.

Before the new JSX Transform, React applications were used to transform JSX code using the Babel compiler during runtime. This transformation process added some overhead to the initial loading and rendering of the application. The new JSX Transform aims to optimize this process and make React applications load and render more quickly.

Here's an example to illustrate this:

Old JSX Transformation (with Babel):

import React from 'react';

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

In the old approach, the above JSX code would be transformed into JavaScript code using Babel during runtime, adding some extra processing time.

New JSX Transformation:

With the new JSX Transform, the same JSX code can be written as follows:

import React from 'react';

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

export default App;

However, this is not perfect:

• Because JSX was compiled into React.createElement, React needed to be in scope if you used JSX.

• There are some performance improvements and simplifications that React.createElement does not allow.

To solve these issues, React 17 introduces two new entry points to the React package that are intended to only be used by compilers like Babel and TypeScript. Instead of transforming JSX to React.createElement, the new JSX transform automatically imports special functions from those new entry points in the React package and calls them.

Let’s say that your source code looks like this:

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

This is what the new JSX transform compiles it to:

// Inserted by a compiler (don't import it yourself!)
import {jsx as _jsx} from 'react/jsx-runtime';

function App() {
  return _jsx('h1', { children: 'Hello world' });
}

Note :

The functions inside react/jsx-runtime and react/jsx-dev-runtime must only be used by the compiler transform. If you need to manually create elements in your code, you should keep using React.createElement. It will continue to work and is not going away.

• Reduced Bundle Sizes:

One of the significant benefits of the new JSX Transform is its ability to generate smaller bundle sizes. This is achieved by eliminating the need for certain runtime helper functions, resulting in cleaner and more efficient code.

• Simplified Configuration:

Configuring Babel plugins and presets to handle JSX transformations could sometimes be complex and error-prone. The new JSX Transform simplifies this process by providing a more straightforward and standardized approach.

Before JSX Transform (with Babel):

In the old approach, you would typically configure Babel to transform JSX code using plugins and presets. Here's an example .babelrc configuration file:

{
  "presets": ["@babel/preset-react"],
  "plugins": []
}

You would need to install the @babel/preset-react preset and possibly other plugins depending on your project's requirements. Configuring Babel could sometimes involve managing multiple plugins and presets.

After JSX Transform:

With the new JSX Transform, you don't need to configure additional presets or plugins for JSX transformation. The new JSX Transform is included by default when you use modern versions of React.

Here's the same code using the new JSX Transform:

import React from 'react';

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

export default App;

In this example, you can see that there is no need to configure Babel or include additional presets or plugins. The new JSX Transform is seamlessly integrated into React, providing a more straightforward and standardized approach to JSX transformation without the need for complex configuration.

This simplified configuration process reduces the potential for errors, makes it easier to set up new projects and streamlines the development workflow when working with JSX in React applications.

• Enhanced Developer Experience:

The streamlined transformation process enhances the developer experience by providing cleaner stack traces and error messages. This makes debugging and troubleshooting your React applications more straightforward and less time-consuming.

How to Upgrade to the New JSX Transform?

Upgrading to the new JSX Transform is a straightforward process:

The new JSX Transform is a feature introduced in React 17 that allows you to use JSX syntax without requiring the React import in your files. This can help reduce bundle sizes and improve performance. Here's how you can upgrade your project step by step:

1. Update React and React DOM:

   First, make sure you are using React version 17 or higher and React DOM version 17 or higher. Update your package.json or use your package manager to update these dependencies. For example, using npm:

    npm install react@17 react-dom@17
   

2. Update Babel:

   Ensure you are using Babel version 7.12 or later, as this version includes support for the new JSX Transform. If you're not using the required version, update your package.json or use your package manager to update Babel. For example, using npm:

    npm install @babel/core@7.12 @babel/preset-react@7.12
   

   Update your Babel configuration (usually stored in a .babelrc file or your babel.config.js) to include the new JSX Transform preset. Here's an example of a .babelrc file:

    {
      "presets": ["@babel/preset-react"]
    }
   

   Make sure that your Babel configuration includes the @babel/preset-react preset to enable the new JSX Transform.

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 every import manually and separately; all you have to do is to use an automatic script called codemod, such as:

cd your_project
npx react-codemod update-react-imports

When you execute this codemod, the following changes will occur:

1. Removal of Unused React Imports: All unused React imports resulting from your transition to the new JSX transform will be removed. This helps declutter your codebase by eliminating imports that are no longer necessary.

2. Transition to Destructured Named Imports: Default React imports (e.g., import React from "react") will be transformed into more modern and preferred destructured named imports (e.g., import { useState } from "react"). This aligns with evolving best practices and sets a direction for the future. It's important to note that this codemod won't impact existing namespace imports (e.g., import * as React from "react"), which remain a valid import style. While default imports will continue functioning in React 17, it's recommended to gradually transition away from them for long-term compatibility and readability improvements.

By running this codemod, you're streamlining your codebase, adopting a cleaner import style, and preparing your project for future updates and enhancements in React.

For example,

import React from 'react';

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

will be replaced with

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

Provided example demonstrates the behavior of the codemod accurately. When you run the codemod script, it will transform the usage of React.useState to the destructured named import useState, resulting in a cleaner and more concise code:

Before the codemod:

import React from 'react';

function App() {
  const [text, setText] = React.useState('Hello World');
  return <h1>{text}</h1>;
}

After running the codemod:

import { useState } from 'react';

function App() {
  const [text, setText] = useState('Hello World');
  return <h1>{text}</h1>;
}

I hope this blog was helpful to you and the upcoming blog will cover the concepts of using props in React.js using the New JSX Transform.

Thanks for Reading.