React compiler is a new experimental compiler that promises to revolutionize the way React applications are optimized for performance.

You can read and listen to this article in a podcast format at this free Medium link.

What Is A Compiler?

In short, a compiler is a program that translates one programming language (the source language) into another (the target language).

A compiler translate a source language into a target language

For example, JSX and TSX are compiled into JavaScript (with Babel or others) for the browser to understand the code.

Why A New React Compiler?

One of the main reasons I have heard is Performance Optimization.

Sometimes, React applications suffer from unnecessary re-renders, leading to performance issues.
Developers can optimize the code using memorization, callbacks, and the like. But often this translates into a cluttered component filled with memoization calls.

What is the React Compiler solution?

Briefly speaking, React Compiler should automatically optimize your code, reducing the need for manual performance optimization.

As a consequence, React Compiler should improve app responsiveness.

Let’s dive into it.

What Is React Compiler?

React compiler is an experimental compiler already available in React 18. It is, and most likely will be, an optional tool even in React 19.

Using React Compiler in React 18 requires some manual configuration but you can already try it.

The React Compiler is designed to work within the ecosystem of React 19

Install React Compiler

While React Compiler is used in production at Instagram, it is open-sourced as beta and available on React 17+.

The compiler comes with a strongly recommended eslint plugin that shows the compiler analysis in the editor.

You can use the eslint plugin even if you are not using React Compiler.

React Compiler Healthcheck

Before installing React Compiler it is recommended to check compatibility.

Run the following command:

npx react-compiler-healthcheck@beta

to get a result like below:

Output of npx react-compiler-healthcheck@beta
Output of npx react-compiler-healthcheck@beta

A higher number of compiled components is a good thing. That is the number of components that can be successfully optimized.

My StrictMode is not enabled but having this enabled and followed means a higher chance that the Rules of React are followed.
So we should probably keep it enabled.

Finally, react-compiler-healthcheck checks for known libraries that are incompatible with the compiler. I have none, but MobX will give you problems. It won’t work.

Installing React Compiler

Install React Compiler using npm:

npm install -D babel-plugin-react-compiler@beta eslint-plugin-react-compiler@beta

Or, if you’re using Yarn:

yarn add -D babel-plugin-react-compiler@beta eslint-plugin-react-compiler@beta

You should also add the eslint plugin to the config. In my case, it is a .eslintrc.js file.

module.exports = {
  plugins: [
    'eslint-plugin-react-compiler',
  ],
  rules: {
    'react-compiler/react-compiler': "error",
  },
}

Once eslint plugin is set up correctly, you might get some warnings about the Rules of React. You can update them on the spot or later.

The only difference is that in the second case, React skipped optimizing that component or hook.

You can read and listen to this article in a podcast format at this free Medium link.