React Compiler Runtime

1.0.0 · active · verified Sun Apr 19

react-compiler-runtime is a foundational library that provides the necessary primitives and infrastructure for the experimental React Compiler to operate effectively at runtime. It underpins the compiler's ability to automatically memoize components and hooks, thereby optimizing rendering performance without manual `useMemo` or `useCallback` declarations. The package itself is largely internal, meant to be consumed by the compiled output of the React Compiler rather than directly imported by application developers. As of version 1.0.0, its release cadence is tightly coupled with the development and release cycles of the broader React ecosystem, particularly the React Compiler and React core library (currently React 19 is under active development). Its key differentiator is enabling a future where React applications achieve optimal performance with significantly reduced boilerplate, shifting the responsibility of memoization from the developer to the build toolchain.

Common errors

Warnings

Install

Imports

Quickstart

This quickstart demonstrates a React component with a manually memoized calculation, illustrating the type of optimization the React Compiler and its runtime (react-compiler-runtime) aim to automate.

import React, { useState, useMemo } from 'react';
import ReactDOM from 'react-dom/client';

// This component uses a memoized calculation.
// With the React Compiler, the `useMemo` call for `expensiveCalculation`
// might be automatically inserted or optimized, relying on the
// `react-compiler-runtime` under the hood to manage the memoization cache.
function MyOptimizedComponent() {
  const [count, setCount] = useState(0);
  const [multiplier, setMultiplier] = useState(2);

  const expensiveCalculation = useMemo(() => {
    console.log('Calculating expensive value...');
    let result = 0;
    for (let i = 0; i < 1000000; i++) {
      result += i;
    }
    return result * count * multiplier;
  }, [count, multiplier]);

  return (
    <div>
      <h1>React Compiler Runtime Demo</h1>
      <p>Count: {count}</p>
      <button onClick={() => setCount(c => c + 1)}>Increment Count</button>
      <p>Multiplier: {multiplier}</p>
      <button onClick={() => setMultiplier(m => m + 1)}>Increment Multiplier</button>
      <p>Expensive Calculation Result: {expensiveCalculation}</p>
      <p>
        The React Compiler, enabled by `react-compiler-runtime`, aims to automatically memoize
        parts of your components, making manual `useMemo` and `useCallback` often unnecessary.
        This example demonstrates a pattern the compiler would optimize.
      </p>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<MyOptimizedComponent />);

// To run, save as index.tsx, add react and react-dom to package.json,
// and set up a build process (e.g., with Vite or Create React App).
// Ensure your build setup includes the React Compiler plugin if you want to
// observe its effects beyond this conceptual example.

view raw JSON →