{"id":14869,"library":"react-compiler-runtime","title":"React Compiler Runtime","description":"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.","status":"active","version":"1.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/facebook/react","tags":["javascript","typescript"],"install":[{"cmd":"npm install react-compiler-runtime","lang":"bash","label":"npm"},{"cmd":"yarn add react-compiler-runtime","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-compiler-runtime","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required as a peer dependency for the runtime to integrate with React's core functionalities, enabling automatic memoization. Supports React 17, 18, and 19.","package":"react","optional":false}],"imports":[{"note":"The `_c` symbol (or `c` in some contexts) is an internal hook used by the React Compiler's generated code for memoization. It is not part of the public API and direct usage by application developers is strongly discouraged and prone to breaking changes.","symbol":"_c","correct":"import { c as _c } from 'react-compiler-runtime';"},{"note":"While there are no typically exposed named exports for direct application consumption, the package is imported for its side effects or internal polyfills, especially when targeting React versions prior to 19.","symbol":"ReactCompilerRuntime","correct":"import 'react-compiler-runtime';"},{"note":"The runtime likely contains internal factories or utilities for creating and managing memoization caches. These are typically consumed by the compiled output or the Babel plugin, not directly by application code. There is no publicly documented `createMemoCache` export.","symbol":"createMemoCache","correct":"/* No direct import for application developers */"}],"quickstart":{"code":"import React, { useState, useMemo } from 'react';\nimport ReactDOM from 'react-dom/client';\n\n// This component uses a memoized calculation.\n// With the React Compiler, the `useMemo` call for `expensiveCalculation`\n// might be automatically inserted or optimized, relying on the\n// `react-compiler-runtime` under the hood to manage the memoization cache.\nfunction MyOptimizedComponent() {\n const [count, setCount] = useState(0);\n const [multiplier, setMultiplier] = useState(2);\n\n const expensiveCalculation = useMemo(() => {\n console.log('Calculating expensive value...');\n let result = 0;\n for (let i = 0; i < 1000000; i++) {\n result += i;\n }\n return result * count * multiplier;\n }, [count, multiplier]);\n\n return (\n
\n

React Compiler Runtime Demo

\n

Count: {count}

\n \n

Multiplier: {multiplier}

\n \n

Expensive Calculation Result: {expensiveCalculation}

\n

\n The React Compiler, enabled by `react-compiler-runtime`, aims to automatically memoize\n parts of your components, making manual `useMemo` and `useCallback` often unnecessary.\n This example demonstrates a pattern the compiler would optimize.\n

\n
\n );\n}\n\nconst root = ReactDOM.createRoot(document.getElementById('root'));\nroot.render();\n\n// To run, save as index.tsx, add react and react-dom to package.json,\n// and set up a build process (e.g., with Vite or Create React App).\n// Ensure your build setup includes the React Compiler plugin if you want to\n// observe its effects beyond this conceptual example.","lang":"typescript","description":"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."},"warnings":[{"fix":"Avoid direct imports or reliance on `react-compiler-runtime`'s internal symbols in application code. Focus on adhering to React's Rules of Hooks and letting the `babel-plugin-react-compiler` handle the optimization.","message":"Direct usage of `react-compiler-runtime` APIs (like the internal `_c` hook) is highly discouraged. Its internal structure is subject to frequent change without adherence to semver, as these APIs are intended for the React Compiler's generated output, not for application developers.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Monitor official React Compiler documentation and release notes. Implement thorough testing for applications or libraries using the compiler to catch regressions.","message":"The React Compiler (and thus its runtime) is currently experimental. Its behavior, stability, and integration methods are still evolving, and breaking changes or unexpected performance characteristics may occur. Consider its use primarily for libraries or projects that can tolerate this level of churn.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Upgrade or downgrade your `react` and `react-dom` packages to satisfy the peer dependency range, e.g., `npm install react@latest react-dom@latest`.","message":"Ensure your `react` peer dependency (`^17.0.0 || ^18.0.0 || ^19.0.0 || ^0.0.0-experimental`) is met. Mismatched React versions can lead to runtime errors or incorrect compiler behavior, as the runtime is designed to integrate deeply with specific React core functionalities and may polyfill APIs for older versions.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Always use the latest stable version of `eslint-plugin-react-hooks` and `eslint-plugin-react-compiler` to ensure you have the most up-to-date linting rules and compiler integration.","message":"The `eslint-plugin-react-hooks` package, closely related to the compiler ecosystem, saw a `component-hook-factories` rule accidentally removed in v7.1.0 and then re-added as a deprecated no-op in v7.1.1. This indicates the rapid evolution of tooling around the React Compiler and the need to keep related packages up-to-date.","severity":"deprecated","affected_versions":"7.1.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"`npm install react-compiler-runtime` or `yarn add react-compiler-runtime`. For libraries targeting React < 19, ensure it's a direct dependency and included in the final bundle.","cause":"The `react-compiler-runtime` package is not installed or incorrectly referenced in your project's build configuration. This is common when setting up the React Compiler.","error":"Module not found: Can't resolve 'react-compiler-runtime'"},{"fix":"Verify your React Compiler setup, ensuring proper transpilation and React version compatibility in your Babel/Vite configuration. Check your `react` and `react-dom` versions. Ensure your code adheres to React's Rules of Hooks.","cause":"This common React error can occur if the `react-compiler-runtime` or the React Compiler itself is misconfigured, leading to an incorrect build output that violates React's Rules of Hooks.","error":"Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component."},{"fix":"Upgrade or downgrade your `react` and `react-dom` packages to match the required range, e.g., `npm install react@latest react-dom@latest` or `npm install react@18 react-dom@18`.","cause":"Your installed React version does not satisfy the `react-compiler-runtime`'s peer dependency requirements, which can lead to instability or undefined behavior.","error":"Peer dependency 'react' (^17.0.0 || ^18.0.0 || ^19.0.0 || ^0.0.0-experimental) not met."}],"ecosystem":"npm"}