React Compiler

Analyzes code flow at compile time to understand which components depend on which props or state, and automatically prevents unnecessary re-renders. In other words, developers don't need to manually manage "memoization" - the compiler inserts optimization code internally.


// @compile enable
function MyComponent(props) {
  const value = compute(props.a, props.b);
  return <div>{value}</div>;
}


// @compile disable
function LegacyComponent(props) {
  const value = compute(props.a, props.b);
  return <div>{value}</div>;
}

`react-compiler.config.js`


module.exports = {
  directives: {
    enable: '@compile enable',
    disable: '@compile disable',
  },
  default: true,
};

`package.json`

When library authors write their code in a way that React Compiler can understand and apply the compiler during the build step, the final output (e.g., inside the dist/ folder) becomes already-optimized code that can be imported and used directly. Therefore, to avoid redundant optimization, libraries can be configured to skip recompilation.


{
  "name": "my-optimized-lib",
  "main": "dist/index.js",
  "reactCompiler": {
    "precompiled": true
  }
}

Webpack


module.exports = {
  // …
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules\/(?!my-optimized-lib)/,
        use: ['babel-loader', 'react-compiler-loader'],
      }
    ]
  }
};

React Compiler – React

The library for web and native user interfaces

https://react.dev/learn/react-compiler

React Compiler

react-compiler.config.js

package.json

Webpack

Recommendations

`react-compiler.config.js`

`package.json`