How React Compiler Eliminates Unnecessary Re‑renders: Real‑World Tests

Background

React 19 introduced a major new feature called React Compiler. The compiler was created by the React team to address excessive UI re‑rendering when state changes, automatically applying memoization at build time by analyzing JavaScript and React rules.

What Is the React Compiler?

The compiler solves the problem of spontaneous re‑renders in React. Every state change triggers a re‑render of the component and its children, which can hurt performance for heavy components or frequent updates. Although React provides tools like React.memo, useMemo, and useCallback, using them correctly is difficult. The React Compiler plugs into the build system, analyzes the original component code, and automatically determines prop and hook dependencies, achieving the same effect as manual memoization. It is experimental and should not be used in production.

Testing the Compiler

The goal is to verify whether the compiler’s promises hold up in practice.

The compiler works out‑of‑the‑box: install it and it functions without rewriting existing code.

After installation, you no longer need to think about React.memo, useMemo, or useCallback.

To test these assumptions, three simple examples were built and run in three different applications.

Simple Example: Installing the Compiler

Install the Next.js canary version with the compiler plugin:

npm install next@canary babel-plugin-react-compiler

Enable the compiler in next.config.js:

const nextConfig = {
  experimental: {
    reactCompiler: true
  }
};
module.exports = nextConfig;

After this, memoized components appear automatically in the React DevTools.

Example 1: Simple State Change

const SimpleCase1 = () => {
  const [isOpen, setIsOpen] = useState(false);
  return (
    <div>
      <button onClick={() => setIsOpen(!isOpen)}>{isOpen ? '关闭' : '打开'}对话框</button>
      {isOpen && <Dialog />}
      <VerySlowComponent />
    </div>
  );
};

The component toggles a dialog and renders a heavy VerySlowComponent. Normally, changing isOpen would also re‑render VerySlowComponent, causing delay. With the compiler, the heavy component is automatically memoized, eliminating the extra render without needing React.memo.

Example 2: Slow Component with Props

const SimpleCase2 = () => {
  const [isOpen, setIsOpen] = useState(false);
  const onSubmit = (data) => {
    // handle submission
  };
  const data = { id: 'bla' };
  return (
    <div>
      <VerySlowComponent onSubmit={onSubmit} data={data} />
    </div>
  );
};

Without the compiler, you would need to wrap VerySlowComponent with React.memo, the data prop with useMemo, and the onSubmit prop with useCallback. The React Compiler automatically memoizes the component and its props, so the heavy component does not re‑render when isOpen changes.

Example 3: Component with Children

export const SimpleCase3 = () => {
  const [isOpen, setIsOpen] = useState(false);
  const child = useMemo(() => <SomeOtherComponent />, []);
  return (
    <>
      <VerySlowComponentMemo child={child} />
    </>
  );
};

When a slow component receives children, manual memoization is error‑prone. Normally you would need to memoize both the parent and the child element. With the compiler, the children are automatically memoized, and the heavy component does not re‑render.

Summary

All three examples demonstrate that the React Compiler can automatically memoize components and eliminate unnecessary renders, which is impressive. However, it does not handle every scenario—custom hooks or highly dynamic props may still require manual memo, useMemo, or useCallback. Understanding these tools remains important, and a combined approach may be needed for edge cases.