React
A guided tour of the React knowledge bundle, transformed from the official react.dev documentation into one OKF concept per page.
What this bundle is
The official React documentation at react.dev, restructured as an OKF bundle: one concept per documentation page, with the page's canonical URL in each concept's resource. It has two halves: the Learn guide, which teaches how React works and how to think in it, and the API Reference, which gives exact signatures, parameters, return values, and caveats for every documented export, from useState to the server rendering APIs. The content is transformed and summarized, not copied; the timestamp and cited URL on each concept tell you how to re-check it against the live docs. For navigation by section, start at the bundle root index.
The mental model
React UIs are built from components, functions that return markup written in JSX. Components receive props from their parents and keep their own memory in state. When state changes, React re-renders the component and updates the DOM to match. Components must be pure: same inputs, same output, no side effects during render. Side effects that synchronize with external systems go in Effects, and values that persist without triggering a render go in refs.
Learn React
Read the four core sections in order, each starting at its landing concept:
- Describing the UI - Components, JSX, props, conditional rendering, lists, purity, and the render tree.
- Adding Interactivity - Events, state, the render-and-commit cycle, state as a snapshot, and updating objects and arrays.
- Managing State - Structuring state, sharing it by lifting it up, preserving and resetting it, reducers, and context.
- Escape Hatches - Refs, Effects, why you might not need an Effect, and custom Hooks.
New to React entirely? Start with the quick start and the tic-tac-toe tutorial.
When you need exact behavior
The Learn guide teaches the ideas; the API Reference pins down the contracts. The most-used entries are the Hooks, above all useState, useEffect, useContext, and useReducer. The Rules of React and the ESLint plugin explain the constraints the whole model depends on.
Provenance
Every concept cites its source react.dev page. React documentation prose is licensed CC BY 4.0 and its code samples MIT, by Meta and the React contributors. This bundle restructures and summarizes that material for agent consumption; consult the cited URL for the authoritative, current text.
What's inside
Adding Interactivity
- Adding Interactivity
Section landing page on writing components that handle interactions, hold state, and render different output over time.
- Responding to Events
How to add event handlers to JSX, pass them as props, and control event propagation and default behavior.
- Render and Commit
The three steps React takes to display components, trigger, render, and commit, and why rendering does not always touch the DOM.
- State as a Snapshot
Why state behaves like a snapshot fixed per render, so it does not update immediately after you set it.
- Queueing a Series of State Updates
How React batches state updates within an event, and how updater functions queue multiple changes to the same state.
- Updating Objects in State
Update an object held in React state by creating a new copy instead of mutating the existing one.
- Updating Arrays in State
Update an array held in React state with non-mutating operations that return a new array.
Describing The Ui
- Describing the UI
Section landing page for building, customizing, and conditionally displaying React components.
- Your First Component
How to define and use a React component, a JavaScript function that returns JSX markup.
- Importing and Exporting Components
How to split components across files using default and named imports and exports.
- Writing Markup with JSX
How to add HTML-like markup to JavaScript with the JSX syntax extension and its three rules.
- JavaScript in JSX with Curly Braces
How to reference JavaScript variables, calls, and objects inside JSX using curly braces.
- Passing Props to a Component
How to configure components with props, including any JavaScript value, defaults, spread, and children.
- Conditional Rendering
How to render different JSX depending on conditions using if, the logical AND, and the ternary operator.
- Rendering Lists
How to render multiple components from a collection using map() and filter(), with stable keys.
- Keeping Components Pure
How to avoid a class of bugs by writing components as pure functions with the same output for the same inputs.
- Understanding Your UI as a Tree
Why modeling your UI as a render tree and a module dependency tree helps debug performance and bundle size.
Escape Hatches
- Escape Hatches
Section landing for React features that step outside React to connect with external systems via refs, Effects, and custom Hooks.
- Referencing Values with Refs
Use refs to let a component remember information without triggering re-renders, and how refs differ from state.
- Manipulating the DOM with Refs
Use refs to access DOM nodes that React manages, for focus, scroll, and measurement, and the rules for doing so safely.
- Synchronizing with Effects
Use Effects to run code after rendering that synchronizes a component with an external system, and how to add dependencies and cleanup.
- You Might Not Need an Effect
When to remove unnecessary Effects by calculating during render, handling logic in events, and using keys, memoization, and external store Hooks.
- Lifecycle of Reactive Effects
How an Effect's lifecycle of start and stop synchronization differs from a component's, and why reactive values must be dependencies.
- Separating Events from Effects
Choose between event handlers and Effects, and extract non-reactive logic into Effect Events so some values do not re-trigger an Effect.
- Removing Effect Dependencies
Make Effects re-run less often by changing the code so unnecessary dependencies fall away, never by suppressing the dependency linter.
- Reusing Logic with Custom Hooks
Write your own Hooks to share stateful logic between components, naming and structuring them, and when to extract one.
Get Started
- Tutorial: Tic-Tac-Toe
A hands-on walkthrough that builds a small tic-tac-toe game to introduce React components, props, state, lifting state up, immutability, and time travel.
- Thinking in React
The five-step thought process for building a React UI, from breaking a mockup into components to wiring up inverse data flow.
Installation
- Installation
Overview of the ways to start using React, from trying it online to creating an app or adding it to an existing project.
- Creating a React App
Recommended full-stack frameworks for starting a new React app, plus when to start from scratch instead.
- Build a React App from Scratch
How to set up a React project from scratch with a build tool, and the application patterns you must solve yourself.
- Add React to an Existing Project
How to add interactive React components to an existing website or app, by subroute or by page region.
Managing State
- Managing State
Section landing page for organizing state, keeping update logic maintainable, and sharing state between distant components in React.
- Reacting to Input with State
Describe a component's visual states declaratively and switch between them in response to input, instead of manipulating the UI imperatively.
- Choosing the State Structure
Five principles for shaping state so it stays in sync, avoids impossible states, and is easy to update without introducing bugs.
- Sharing State Between Components
Lift state up to a common parent so two components change together, and understand controlled vs uncontrolled components and single source of truth.
- Preserving and Resetting State
How React decides when to keep a component's state and when to reset it, based on position in the render tree and the key prop.
- Extracting State Logic into a Reducer
How to consolidate many state updates spread across event handlers into a single reducer function with useReducer.
- Passing Data Deeply with Context
How to use context to make information available to any component in the tree below a parent, without passing it explicitly through props.
- Scaling Up with Reducer and Context
How to combine a reducer with context so state and dispatch reach any component in the tree without prop drilling.
React Compiler
- React Compiler
Landing page for the LEARN-side React Compiler guide, orienting you across introduction, installation, incremental adoption, and debugging.
- Introduction
What React Compiler is, what it optimizes, whether to adopt it, supported build tools, and how it interacts with existing manual memoization.
- Installation
How to install React Compiler and configure it for Babel, Vite, Next.js, React Router, Webpack, Expo, Metro, Rspack, and Rsbuild, plus how to verify it works.
- Incremental Adoption
Strategies to roll out React Compiler gradually using Babel overrides, annotation-mode opt-in, and runtime gating feature flags.
- Debugging and Troubleshooting
How to tell compiler errors from runtime issues, recognize common breaking patterns, follow a debugging workflow, and report compiler bugs.
Setup
- Setup
Landing page for getting your React development environment ready, covering editors, TypeScript, browser devtools, and the compiler.
- Editor Setup
Recommended editors for React and how to set up linting and automatic formatting.
- Using TypeScript
How to add TypeScript to a React project and type components, Hooks, DOM events, children, and style props.
- React Developer Tools
How to install React Developer Tools to inspect components, edit props and state, and find performance problems.