Learn React

React Compiler

React Compiler is a new build-time tool that automatically optimizes your React app. It works with plain JavaScript, and understands the Rules of React, so you don’t need to rewrite any code to use it.

You will learn

  • What React Compiler does
  • Getting started with the compiler
  • Incremental adoption strategies
  • Debugging and troubleshooting when things go wrong
  • Using the compiler on your React library

Note

React Compiler is currently in RC. We now recommend everyone to try the compiler and provide feedback. The latest RC release can be found with the @rc tag.

What does React Compiler do?

React Compiler automatically optimizes your React application at build time. React is often fast enough without optimization, but sometimes you need to manually memoize components and values to keep your app responsive. This manual memoization is tedious, easy to get wrong, and adds extra code to maintain. React Compiler does this optimization automatically for you, freeing you from this mental burden so you can focus on building features.

Before React Compiler

Without the compiler, you need to manually memoize components and values to optimize re-renders:

import { useMemo, useCallback, memo } from 'react';

const ExpensiveComponent = memo(function ExpensiveComponent({ data, onClick }) {
  const processedData = useMemo(() => {
    return expensiveProcessing(data);
  }, [data]);

  const handleClick = useCallback((item) => {
    onClick(item.id);
  }, [onClick]);

  return (
    <div>
      {processedData.map(item => (
        <Item key={item.id} onClick={() => handleClick(item)} />
      ))}
    </div>
  );
});

After React Compiler

With React Compiler, you write the same code without manual memoization:

function ExpensiveComponent({ data, onClick }) {
  const processedData = expensiveProcessing(data);

  const handleClick = (item) => {
    onClick(item.id);
  };

  return (
    <div>
      {processedData.map(item => (
        <Item key={item.id} onClick={() => handleClick(item)} />
      ))}
    </div>
  );
}

React Compiler automatically applies the equivalent optimizations, ensuring your app only re-renders when necessary. This is sometimes referred to as “fine-grained reactivity.”

Should I try out the compiler?

React Compiler is now in RC and has been tested extensively in production. While it has been used in production at companies like Meta, rolling out the compiler to production for your app will depend on the health of your codebase and how well you’ve followed the Rules of React.

You don’t have to rush into using the compiler now. It’s okay to wait until it reaches a stable release before adopting it. However, we do appreciate trying it out in small experiments in your apps so that you can provide feedback to us to help make the compiler better.

Try React Compiler

This section will help you get started with React Compiler and understand how to use it effectively in your projects.

Additional resources

In addition to these docs, we recommend checking the React Compiler Working Group for additional information and discussion about the compiler.

PreviousReact Developer Tools
NextGetting Started