Skip to content

React Compiler

Introduction

Section titled “Introduction”

Learn what React Compiler does and how it automatically optimizes your React application by handling memoization for you, eliminating the need for manual useMemo, useCallback, and React.memo.

Installation

Section titled “Installation”

Get started with installing React Compiler and learn how to configure it with your build tools.

Incremental Adoption

Section titled “Incremental Adoption”

Learn strategies for gradually adopting React Compiler in your existing codebase if you’re not ready to enable it everywhere yet.

Debugging and Troubleshooting

Section titled “Debugging and Troubleshooting”

When things don’t work as expected, use our debugging guide to understand the difference between compiler errors and runtime issues, identify common breaking patterns, and follow a systematic debugging workflow.

Configuration and Reference

Section titled “Configuration and Reference”

For detailed configuration options and API reference:

Additional resources

Section titled “Additional resources”

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

← Docs Vault

React

Learn

Quick StartAdd React to an Existing ProjectAdding InteractivityBuild a React app from ScratchChoosing the State StructureConditional RenderingCreating a React AppDescribing the UIEditor SetupEscape HatchesExtracting State Logic into a ReducerImporting and Exporting ComponentsInstallationJavaScript in JSX with Curly BracesKeeping Components PureLifecycle of Reactive EffectsManaging StateManipulating the DOM with RefsPassing Data Deeply with ContextPassing Props to a ComponentPreserving and Resetting StateQueueing a Series of State Updates

react-compiler

React CompilerDebugging and TroubleshootingIncremental AdoptionInstallationIntroduction
React Developer ToolsReacting to Input with StateReferencing Values with RefsRemoving Effect DependenciesRender and CommitRendering ListsResponding to EventsReusing Logic with Custom HooksRSC Sandbox TestScaling Up with Reducer and ContextSeparating Events from EffectsSetupSharing State Between ComponentsState: A Component's MemoryState as a SnapshotSynchronizing with EffectsThinking in ReactUsing TypeScriptUnderstanding Your UI as a TreeUpdating Arrays in StateUpdating Objects in StateWriting Markup with JSXYou Might Not Need an EffectYour First Component

Reference

dev-tools

React Performance tracks

eslint-plugin-react-hooks

eslint-plugin-react-hooks

lints

component-hook-factoriesconfigerror-boundariesexhaustive-depsgatingglobalsimmutabilityincompatible-librarypreserve-manual-memoizationpurityrefsrules-of-hooksset-state-in-effectset-state-in-renderstatic-componentsunsupported-syntaxuse-memo

react

React Reference Overviewact<Activity>addTransitionTypeBuilt-in React APIscachecacheSignalcaptureOwnerStackChildrencloneElementComponentBuilt-in React ComponentscreateContextcreateElementcreateRefexperimental_taintObjectReferenceexperimental_taintUniqueValueforwardRef<Fragment> (<>...</>)Built-in React HooksisValidElementlazyLegacy React APIsmemo<Profiler>PureComponentstartTransition<StrictMode><Suspense>useuseActionStateuseCallbackuseContextuseDebugValueuseDeferredValueuseEffectuseEffectEventuseIduseImperativeHandleuseInsertionEffectuseLayoutEffectuseMemouseOptimisticuseReduceruseRefuseStateuseSyncExternalStoreuseTransition<ViewTransition>

react-compiler

compilationModeCompiling LibrariesConfiguration

directives

Directivesuse memouse no memo
gatingloggerpanicThresholdtarget

react-dom

React DOM APIs

client

Client React DOM APIscreateRoothydrateRoot

components

React DOM ComponentsCommon components (e.g. <div>)<form><input>LinkMeta<option><progress>Script<select>Style<textarea><title>
createPortalflushSync

hooks

Built-in React DOM HooksuseFormStatus
preconnectprefetchDNSpreinitpreinitModulepreloadpreloadModule

server

Server React DOM APIsrenderToPipeableStreamrenderToReadableStreamrenderToStaticMarkuprenderToStringresumeresumeToPipeableStream

static

Static React DOM APIsprerenderprerenderToNodeStreamresumeAndPrerenderresumeAndPrerenderToNodeStream

rsc

DirectivesServer ComponentsServer Functions'use client''use server'

rules

Rules of ReactComponents and Hooks must be pureReact calls Components and HooksRules of Hooks