React Documentation

Main Page

Guides

Sections

'use client'
'use server'
1. Return a single root element - Writing Markup with JSX
2. Close all the tags - Writing Markup with JSX
3. camelCase all most of the things! - Writing Markup with JSX
<Fragment> - <Fragment> (<>...</>)
<Profiler>
<StrictMode>
<Suspense>
<form>
<input>
<link>
<meta>
<option>
<progress>
<script>
<select>
<style>
<textarea>
<title>
A part of my reducer state becomes undefined after dispatching - useReducer
A single source of truth for each state - Sharing State Between Components
APIs - React DOM APIs
Aborting server rendering - renderToPipeableStream
Aborting server rendering - renderToReadableStream
Accepting an array of objects as a prop - Children
Accessing another component’s DOM nodes - Manipulating the DOM with Refs
Add React to an existing project - Installation
Adding TypeScript to an existing React project - Using TypeScript
Adding a label to a custom Hook - useDebugValue
Adding a reducer to a component - useReducer
Adding a ref to your component - Referencing Values with Refs
Adding a state variable - State: A Component's Memory
Adding event handlers - Responding to Events
Adding interactivity to Server Components - Server Components
Adding lifecycle methods to a class component - Component
Adding state to a class component - Component
Adding state to a component - useState
Adding styles - Quick Start
Adding support for server rendering - useSyncExternalStore
Adding time travel - Tutorial: Tic-Tac-Toe
Adding to an array - Updating Arrays in State
Adjusting some state when a prop changes - You Might Not Need an Effect
All HTML components - React DOM Components
All SVG components - React DOM Components
All variables declared in the component body are reactive - Lifecycle of Reactive Effects
Anatomy of useState - State: A Component's Memory
And more… - Build a React app from Scratch
AnimationEvent handler function - Common components (e.g. <div>)
Annotating specific items within the document with links - <link>
Annotating specific items within the document with metadata - <meta>
Annotating the document with metadata - <meta>
Applying CSS styles - Common components (e.g. <div>)
Are you reading some state to calculate the next state? - Removing Effect Dependencies
Assigning multiple elements to a variable - <Fragment> (<>...</>)
Async components with Server Components - Server Components
Avoid contradictions in state - Choosing the State Structure
Avoid deeply nested state - Choosing the State Structure
Avoid duplication in state - Choosing the State Structure
Avoid redundant state - Choosing the State Structure
Avoiding recreating the initial state - useReducer
Avoiding recreating the initial state - useState
Avoiding recreating the ref contents - useRef
Babel - React Compiler
Before you use context - Passing Data Deeply with Context
Best practices for DOM manipulation with refs - Manipulating the DOM with Refs
Best practices for refs - Referencing Values with Refs
Browser extension - React Developer Tools
Browser support - Client React DOM APIs
Build a React App from Scratch - Installation
Building a Suspense-enabled router - useTransition
Building the board - Tutorial: Tic-Tac-Toe
Building with interactivity and state - 'use client'
Built-in components - Built-in React Components
Cache an expensive computation - cache
Caching expensive calculations - You Might Not Need an Effect
Calling a Server Function outside of <form> - 'use server'
Calling a render prop to customize rendering - Children
Can event handlers have side effects? - Responding to Events
Catching rendering errors with an error boundary - Component
Chains of computations - You Might Not Need an Effect
Checking if something is a React element - isValidElement
Children - Using TypeScript
Children.count(children) - Children
Children.forEach(children, fn, thisArg?) - Children
Children.map(children, fn, thisArg?) - Children
Children.only(children) - Children
Children.toArray(children) - Children
Choosing between event handlers and Effects - Separating Events from Effects
Choosing the state structure - Managing State
Client APIs - Client React DOM APIs
ClipboardEvent handler function - Common components (e.g. <div>)
Code-splitting - Build a React app from Scratch
Combining a reducer with context - Scaling Up with Reducer and Context
Common components (e.g. <div>)
Common components - React DOM Components
Comparing useState and useReducer - Extracting State Logic into a Reducer
Completing the game - Tutorial: Tic-Tac-Toe
Component
Components and Hooks must be pure - Rules of React
Components: UI building blocks - Your First Component
CompositionEvent handler function - Common components (e.g. <div>)
Conditional (ternary) operator (? :) - Conditional Rendering
Conditional rendering - Describing the UI
Conditional rendering - Quick Start
Conditionally assigning JSX to a variable - Conditional Rendering
Conditionally including JSX - Conditional Rendering
Conditionally returning JSX - Conditional Rendering
Conditionally returning nothing with null - Conditional Rendering
Connecting to an external system - useEffect
Consolidate state logic with a reducer - Extracting State Logic into a Reducer
Context Hooks - Built-in React Hooks
Context passes through intermediate components - Passing Data Deeply with Context
Context: an alternative to passing props - Passing Data Deeply with Context
Controlling a non-React widget - useEffect
Controlling a progress indicator - <progress>
Controlling a select box with a state variable - <select>
Controlling a text area with a state variable - <textarea>
Controlling an input with a state variable - <input>
Controlling non-React widgets - Synchronizing with Effects
Controlling stylesheet precedence - <link>
Converting HTML to JSX - Writing Markup with JSX
Converting children to an array - Children
Copying objects with the spread syntax - Updating Objects in State
Counting children - Children
Creating a React App - Installation
Creating a Server Function from a Server Component - Server Functions
Creating an element without JSX - createElement
Creating and nesting components - Quick Start
Creating context - createContext
Custom HTML elements - React DOM Components
Custom Hooks help you migrate to better patterns - Reusing Logic with Custom Hooks
Custom Hooks let you share stateful logic, not state itself - Reusing Logic with Custom Hooks
Custom Hooks: Sharing logic between components - Reusing Logic with Custom Hooks
DOM Events - Using TypeScript
Dangerously setting the inner HTML - Common components (e.g. <div>)
Data Fetching - Build a React app from Scratch
Dealing with rejected Promises - use
Declaring a ref in a class component - createRef
Declaring a winner - Tutorial: Tic-Tac-Toe
Declaring an Effect Event - Separating Events from Effects
Deduplicated stylesheet rendering - <link>
Deferring formatting of a debug value - useDebugValue
Deferring re-rendering for a part of the UI - useDeferredValue
Defining a class component - Component
Defining a component - Your First Component
Dependencies should match the code - Removing Effect Dependencies
Differences between refs and state - Referencing Values with Refs
Different components at the same position reset state - Preserving and Resetting State
Dispatching events in tests - act
Display a form submission error without JavaScript - <form>
Display a pending state during form submission - <form>
Display a pending state during form submission - useFormStatus
Displaying a fallback while content is loading - <Suspense>
Displaying a pending visual state - useTransition
Displaying a select box with options - <option>
Displaying a select box with options - <select>
Displaying a text area - <textarea>
Displaying an error to users with an error boundary - useTransition
Displaying data - Quick Start
Displaying different content on the server and the client - useEffect
Displaying inputs of different types - <input>
Do you want to read a value without “reacting” to its changes? - Removing Effect Dependencies
Does some reactive value change unintentionally? - Removing Effect Dependencies
Don’t dynamically mutate a Hook - React calls Components and Hooks
Don’t dynamically use Hooks - React calls Components and Hooks
Don’t mutate Props - Components and Hooks must be pure
Don’t mutate State - Components and Hooks must be pure
DragEvent handler function - Common components (e.g. <div>)
Each Effect represents a separate synchronization process - Lifecycle of Reactive Effects
Editor Setup - Setup
Effect Hooks - Built-in React Hooks
Effects run whenever synchronization is needed - Separating Events from Effects
Effects “react” to reactive values - Lifecycle of Reactive Effects
Enabling Strict Mode for a part of the app - <StrictMode>
Enabling Strict Mode for entire app - <StrictMode>
Enabling multiple selection - <select>
Enhance a custom error overlay - captureOwnerStack
Entry points - React DOM APIs
Epilogue: Browser paint - Render and Commit
Error logging in production - createRoot
Error logging in production - hydrateRoot
Event handler function - Common components (e.g. <div>)
Event handlers run in response to specific interactions - Separating Events from Effects
Event propagation - Responding to Events
Every time my component renders, the calculation in useMemo re-runs - useMemo
Every time my component renders, useCallback returns a different function - useCallback
Example Hooks - Using TypeScript
Example: Focusing a text input - Manipulating the DOM with Refs
Example: Scrolling to an element - Manipulating the DOM with Refs
Example: building a stopwatch - Referencing Values with Refs
Expo (for native apps) - Creating a React App
Expo - React Compiler
Exporting and importing a component - Importing and Exporting Components
Exporting and importing multiple components from the same file - Importing and Exporting Components
Exposing a DOM node to the parent component - forwardRef
Exposing a custom ref handle to the parent component - useImperativeHandle
Exposing action prop from components - useTransition
Exposing an imperative handle instead of a DOM node - forwardRef
Exposing multiple components - Children
Exposing your own imperative methods - useImperativeHandle
Extracting logic into a custom Hook - cloneElement
Extracting non-reactive logic out of Effects - Separating Events from Effects
Extracting state logic into a reducer - Managing State
Extracting the logic to a custom Hook - useSyncExternalStore
Extracting your own custom Hook from a component - Reusing Logic with Custom Hooks
Familiar props - Passing Props to a Component
Fetching data - Synchronizing with Effects
Fetching data - You Might Not Need an Effect
Fetching data with Effects - useEffect
Filtering arrays of items - Rendering Lists
Final cleanup - Tutorial: Tic-Tac-Toe
Fixing bugs found by double rendering in development - <StrictMode>
Fixing bugs found by re-running Effects in development - <StrictMode>
Fixing bugs found by re-running ref callbacks in development - <StrictMode>
Fixing deprecation warnings enabled by Strict Mode - <StrictMode>
Flushing updates for third-party integrations - flushSync
FocusEvent handler function - Common components (e.g. <div>)
Form Hooks - Built-in React DOM Hooks
Form components - React DOM Components
Formatting - Editor Setup
Forwarding a ref through multiple components - forwardRef
Forwarding props with the JSX spread syntax - Passing Props to a Component
Full-stack frameworks - Creating a React App
Further learning - Using TypeScript
Generating IDs for several related elements - useId
Generating unique IDs for accessibility attributes - useId
Getting Started - React Compiler
Getting a ref to the node - Manipulating the DOM with Refs
Giving a component multiple state variables - State: A Component's Memory
Group related state - Choosing the State Structure
Grouping elements with text - <Fragment> (<>...</>)
Handle form submission on the client - <form>
Handle form submission with a Server Function - <form>
Handling different client and server content - hydrateRoot
Handling different errors in different ways - renderToPipeableStream
Handling different errors in different ways - renderToReadableStream
Handling focus events - Common components (e.g. <div>)
Handling form submission errors - <form>
Handling keyboard events - Common components (e.g. <div>)
Handling mouse events - Common components (e.g. <div>)
Handling multiple submission types - <form>
Handling pointer events - Common components (e.g. <div>)
Hook names always start with use - Reusing Logic with Custom Hooks
How 'use client' marks client code - 'use client'
How React knows that it needs to re-synchronize the Effect - Lifecycle of Reactive Effects
How React re-synchronizes your Effect - Lifecycle of Reactive Effects
How React verifies that your Effect can re-synchronize - Lifecycle of Reactive Effects
How declarative UI compares to imperative - Reacting to Input with State
How do I know my components have been optimized? - React Compiler
How do I prevent the UI from being replaced by a fallback during an update? - <Suspense>
How props change over time - Passing Props to a Component
How to handle the Effect firing twice in development? - Synchronizing with Effects
How to remove unnecessary Effects - You Might Not Need an Effect
How to write an Effect - Synchronizing with Effects
Hydrating an entire document - hydrateRoot
Hydrating server-rendered HTML - hydrateRoot
I am always getting undefined from my context although the default value is different - useContext
I can’t find a way to change the context value - createContext
I can’t get a ref to a custom component - useRef
I need to call useCallback for each list item in a loop, but it’s not allowed - useCallback
I need to call useMemo for each list item in a loop, but it’s not allowed - useMemo
I pass a custom component, but the Children methods don’t show its render result - Children
I want to call useTransition from outside a component - useTransition
Implementing time travel - Tutorial: Tic-Tac-Toe
Importing Server Functions from Client Components - Server Functions
Importing and exporting components - Describing the UI
Importing and exporting context from a file - createContext
Improving Application Performance - Build a React app from Scratch
Indicating that a Transition is happening - <Suspense>
Indicating that the content is stale - useDeferredValue
Initial render - Render and Commit
Initializing the application - You Might Not Need an Effect
Injecting dynamic styles from CSS-in-JS libraries - useInsertionEffect
InputEvent handler function - Common components (e.g. <div>)
Inserting into an array - Updating Arrays in State
Inspecting the starter code - Tutorial: Tic-Tac-Toe
Installation - Using TypeScript
Installing eslint-plugin-react-compiler - React Compiler
Is your Effect doing several unrelated things? - Removing Effect Dependencies
I’m getting an error: “A component is changing an uncontrolled input to be controlled” - <input>
I’m getting an error: “A component is changing an uncontrolled input to be controlled” - <textarea>
I’m getting an error: “Functions are not valid as a React child.” - createRoot
I’m getting an error: “Target container is not a DOM element” - createRoot
I’m getting an error: “The current testing environment is not configured to support act”(…)” - act
I’m getting an error: “The result of getSnapshot should be cached” - useSyncExternalStore
I’m getting an error: “Too many re-renders” - useReducer
I’m getting an error: “Too many re-renders” - useState
I’m getting an error: “You passed a second argument to root.render” - createRoot
I’m getting an error: “You passed a second argument to root.render” - hydrateRoot
I’m getting an error: “useLayoutEffect does nothing on the server” - useLayoutEffect
I’m trying to set state to a function, but it gets called instead - useState
I’ve created a root, but nothing is displayed - createRoot
I’ve dispatched an action, but logging gives me the old state value - useReducer
I’ve dispatched an action, but the screen doesn’t update - useReducer
I’ve updated the state, but logging gives me the old value - useState
I’ve updated the state, but the screen doesn’t update - useState
JSX: Putting markup into JavaScript - Writing Markup with JSX
JavaScript in JSX with curly braces - Describing the UI
Keeping components pure - Describing the UI
Keeping list items in order with key - Rendering Lists
KeyboardEvent handler function - Common components (e.g. <div>)
Lazy-loading components with Suspense - lazy
Legacy APIs - Legacy React APIs
Legacy APIs - React Reference Overview
Legacy Server APIs for non-streaming environments - Server React DOM APIs
Lifecycle of reactive effects - Escape Hatches
Lifting state up - Tutorial: Tic-Tac-Toe
Lifting state up by example - Sharing State Between Components
Lifting state up, again - Tutorial: Tic-Tac-Toe
Limitations of Effect Events - Separating Events from Effects
Linking to a stylesheet - <link>
Linking to related resources - <link>
Linting - Editor Setup
Local mutation: Your component’s little secret - Keeping Components Pure
Logging crashes on the server - renderToPipeableStream
Logging crashes on the server - renderToReadableStream
Logic inside Effects is reactive - Separating Events from Effects
Logic inside event handlers is not reactive - Separating Events from Effects
Logical AND operator (&&) - Conditional Rendering
Making an interactive component - Tutorial: Tic-Tac-Toe
Making other changes to an array - Updating Arrays in State
Manipulating a DOM node with a ref - Common components (e.g. <div>)
Manipulating the DOM with a ref - useRef
Manipulating the DOM with refs - Escape Hatches
Marking a state update as a non-blocking Transition - startTransition
Measuring different parts of the application - <Profiler>
Measuring layout before the browser repaints the screen - useLayoutEffect
Measuring rendering performance programmatically - <Profiler>
Meet your first Hook - State: A Component's Memory
Memoizing a dependency of another Hook - useMemo
Memoizing a function - useMemo
Metro (React Native) - React Compiler
Migrating a component with context from a class to a function - Component
Migrating a component with lifecycle methods from a class to a function - Component
Migrating a component with state from a class to a function - Component
Migrating a simple component from a class to a function - Component
Migrating from a PureComponent class component to a function - PureComponent
Migrating from a class with createRef to a function with useRef - createRef
Migrating from renderToString to a static prerender on the server - renderToString
Migrating from renderToString to a streaming render on the server - renderToString
Minimizing props changes - memo
Mobile (React Native) - React Developer Tools
More fun with JavaScript objects and curly braces - JavaScript in JSX with Curly Braces
MouseEvent handler function - Common components (e.g. <div>)
Moving all wiring into a single file - Scaling Up with Reducer and Context
My Effect does something visual, and I see a flicker before it runs - useEffect
My Effect keeps re-running in an infinite cycle - useEffect
My Effect runs after every re-render - useEffect
My Effect runs twice when the component mounts - useEffect
My action can no longer read the submitted form data - useActionState
My calculation runs twice on every re-render - useMemo
My checkbox doesn’t update when I click on it - <input>
My cleanup logic runs even though my component didn’t unmount - useEffect
My component doesn’t see the value from my provider - useContext
My component is wrapped in forwardRef, but the ref to it is always null - forwardRef
My component re-renders when a prop is an object, array, or function - memo
My entire reducer state becomes undefined after dispatching - useReducer
My initializer or updater function runs twice - useState
My input caret jumps to the beginning on every keystroke - <input>
My lazy component’s state gets reset unexpectedly - lazy
My memoized function still runs even though I’ve called it with the same arguments - cache
My reducer or initializer function runs twice - useReducer
My server-rendered HTML gets re-created from scratch - createRoot
My state updates in Transitions are out of order - useTransition
My stream doesn’t start until the entire app is rendered - prerender
My stream doesn’t start until the entire app is rendered - prerenderToNodeStream
My subscribe function gets called after every re-render - useSyncExternalStore
My text area caret jumps to the beginning on every keystroke - <textarea>
My text area doesn’t update when I type into it - <textarea>
My text input doesn’t update when I type into it - <input>
My useMemo call is supposed to return an object, but returns undefined - useMemo
Naming conventions - Queueing a Series of State Updates
Naming event handler props - Responding to Events
Nesting and organizing components - Your First Component
Next Steps - Quick Start
Next steps - Installation
Next steps - Setup
Next.js (App Router) - Creating a React App
Next.js - React Compiler
Not an Effect: Buying a product - Synchronizing with Effects
Not an Effect: Initializing the application - Synchronizing with Effects
Notifying parent components about state changes - You Might Not Need an Effect
Only call Hooks at the top level - Rules of Hooks
Only call Hooks from React functions - Rules of Hooks
Optimistically updating form data - <form>
Optimistically updating forms - useOptimistic
Optimizing a custom Hook - useCallback
Optimizing re-rendering on every keystroke - <input>
Optimizing re-renders when passing objects and functions - useContext
Option 1: Rendering a component in different positions - Preserving and Resetting State
Option 2: Resetting state with a key - Preserving and Resetting State
Other Hooks - Built-in React Hooks
Other frameworks - Creating a React App
Other issues - React Compiler
Overriding context for a part of the tree - useContext
Overriding props of an element - cloneElement
Overview - Tutorial: Tic-Tac-Toe
Parcel - Build a React app from Scratch
Passing JSX as children - Passing Props to a Component
Passing data deeply into the tree - useContext
Passing data deeply with context - Managing State
Passing data through context - cloneElement
Passing data through props - Tutorial: Tic-Tac-Toe
Passing data to the parent - You Might Not Need an Effect
Passing data with a render prop - cloneElement
Passing event handlers as props - Responding to Events
Passing event handlers to custom Hooks - Reusing Logic with Custom Hooks
Passing handlers as alternative to propagation - Responding to Events
Passing props to a component - Describing the UI
Passing props to a component - Passing Props to a Component
Passing reactive values between Hooks - Reusing Logic with Custom Hooks
Passing strings with quotes - JavaScript in JSX with Curly Braces
Perform non-blocking updates with Actions - useTransition
Performance Hooks - Built-in React Hooks
Picking a key - Tutorial: Tic-Tac-Toe
PointerEvent handler function - Common components (e.g. <div>)
Preconnecting in an event handler - preconnect
Preconnecting when rendering - preconnect
Prefetching DNS in an event handler - prefetchDNS
Prefetching DNS when rendering - prefetchDNS
Preiniting in an event handler - preinit
Preiniting when rendering - preinit
Preload data - cache
Preloading in an event handler - preinitModule
Preloading in an event handler - preload
Preloading in an event handler - preloadModule
Preloading when rendering - preinitModule
Preloading when rendering - preload
Preloading when rendering - preloadModule
Preserving and resetting state - Managing State
Prevent a token from being passed to Client Components - experimental_taintUniqueValue
Prevent user data from unintentionally reaching the client - experimental_taintObjectReference
Preventing already revealed content from hiding - <Suspense>
Preventing an Effect from firing too often - useCallback
Preventing an Effect from firing too often - useMemo
Preventing default behavior - Responding to Events
Preventing unwanted loading indicators - useTransition
Principles for structuring state - Choosing the State Structure
Pro-tip: Use a JSX Converter - Writing Markup with JSX
Progressive enhancement with useActionState - Server Functions
Providing a fallback for server errors and client-only content - <Suspense>
Providing a label for a select box - <select>
Providing a label for a text area - <textarea>
Providing a label for an input - <input>
Providing an initial value for a text area - <textarea>
Providing an initial value for an input - <input>
Providing an initially selected option - <select>
PureComponent
Purity: Components as formulas - Keeping Components Pure
Putting it all together - Synchronizing with Effects
Queueing a series of state updates - Adding Interactivity
Re-renders when state updates - Render and Commit
React - React Reference Overview
React Compiler - Setup
React DOM - React Reference Overview
React Developer Tools - Setup
React Developer Tools - Tutorial: Tic-Tac-Toe
React Router (v7) - Creating a React App
React batches state updates - Queueing a Series of State Updates
React calls Components and Hooks - Rules of React
React doesn’t treat my state update after await as a Transition - useTransition
React doesn’t treat my state update as a Transition - useTransition
React event object - Common components (e.g. <div>)
React verifies that you specified every reactive value as a dependency - Lifecycle of Reactive Effects
Reacting to input with state - Managing State
Reactive values and reactive logic - Separating Events from Effects
Read the form data being submitted - useFormStatus
Reading context with use - use
Reading latest props and state with Effect Events - Separating Events from Effects
Reading props in event handlers - Responding to Events
Reading the input values when submitting a form - <input>
Reading the latest props and state from an Effect - useEffect
Reading the select box value when submitting a form - <select>
Reading the text area value when submitting a form - <textarea>
Recap - Choosing the State Structure
Recap - Conditional Rendering
Recap - Extracting State Logic into a Reducer
Recap - Importing and Exporting Components
Recap - JavaScript in JSX with Curly Braces
Recap - Keeping Components Pure
Recap - Lifecycle of Reactive Effects
Recap - Manipulating the DOM with Refs
Recap - Passing Data Deeply with Context
Recap - Passing Props to a Component
Recap - Preserving and Resetting State
Recap - Queueing a Series of State Updates
Recap - Reacting to Input with State
Recap - Referencing Values with Refs
Recap - Removing Effect Dependencies
Recap - Render and Commit
Recap - Rendering Lists
Recap - Responding to Events
Recap - Reusing Logic with Custom Hooks
Recap - Scaling Up with Reducer and Context
Recap - Separating Events from Effects
Recap - Sharing State Between Components
Recap - State as a Snapshot
Recap - State: A Component's Memory
Recap - Synchronizing with Effects
Recap - Understanding Your UI as a Tree
Recap - Updating Arrays in State
Recap - Updating Objects in State
Recap - Writing Markup with JSX
Recap - You Might Not Need an Effect
Recap - Your First Component
Recommended text editor features - Editor Setup
Recovering from errors inside the shell - renderToPipeableStream
Recovering from errors inside the shell - renderToReadableStream
Recovering from errors outside the shell - renderToPipeableStream
Recovering from errors outside the shell - renderToReadableStream
Ref Hooks - Built-in React Hooks
Referencing a value with a ref - useRef
Referencing values with refs - Escape Hatches
Refs and the DOM - Referencing Values with Refs
Remix - React Compiler
Removed APIs - Legacy React APIs
Removed APIs - React DOM APIs
Removing Effect dependencies - Escape Hatches
Removing from an array - Updating Arrays in State
Removing renderToString from the client code - renderToString
Removing unnecessary dependencies - Removing Effect Dependencies
Removing unnecessary function dependencies - useEffect
Removing unnecessary object dependencies - useEffect
Render and commit - Adding Interactivity
Rendering React components into non-React DOM nodes - createPortal
Rendering React components into non-React server markup - createPortal
Rendering a React tree as HTML to a Node.js Stream - renderToPipeableStream
Rendering a React tree as HTML to a Readable Web Stream - renderToReadableStream
Rendering a React tree as HTML to a string - renderToString
Rendering a React tree to a stream of static HTML - prerender
Rendering a React tree to a stream of static HTML - prerenderToNodeStream
Rendering a React tree to a string of static HTML - prerender
Rendering a React tree to a string of static HTML - prerenderToNodeStream
Rendering a list of Fragments - <Fragment> (<>...</>)
Rendering a modal dialog with a portal - createPortal
Rendering a non-interactive React tree as HTML to a string - renderToStaticMarkup
Rendering a page partially built with React - createRoot
Rendering an app fully built with React - createRoot
Rendering an external script - <script>
Rendering an inline CSS stylesheet - <style>
Rendering an inline script - <script>
Rendering components in tests - act
Rendering data from arrays - Rendering Lists
Rendering lists - Describing the UI
Rendering lists - Quick Start
Rendering takes a snapshot in time - State as a Snapshot
Rendering to a different part of the DOM - createPortal
Replacing items in an array - Updating Arrays in State
Resetting Suspense boundaries on navigation - <Suspense>
Resetting a form with a key - Preserving and Resetting State
Resetting all state when a prop changes - You Might Not Need an Effect
Resetting state at the same position - Preserving and Resetting State
Resetting state with a key - useState
Resource APIs - Built-in React APIs
Resource Preloading APIs - React DOM APIs
Resource and Metadata Components - React DOM Components
Responding to events - Adding Interactivity
Responding to events - Quick Start
Returning multiple elements - <Fragment> (<>...</>)
Reusing logic with custom Hooks - Escape Hatches
Revealing content together at once - <Suspense>
Revealing nested content as it loads - <Suspense>
Rolling out the compiler to your codebase - React Compiler
Routing - Build a React app from Scratch
Rsbuild - Build a React app from Scratch
Rsbuild - React Compiler
Rspack - React Compiler
Rules of Hooks - Rules of React
Rules of React - React Reference Overview
Rules of keys - Rendering Lists
Running some code for each child - Children
Safari and other browsers - React Developer Tools
Same component at the same position preserves state - Preserving and Resetting State
Scaling up with reducer and context - Managing State
Security considerations - 'use server'
Sending a POST request - You Might Not Need an Effect
Sending analytics - Synchronizing with Effects
Separating events from Effects - Escape Hatches
Serializable arguments and return values - 'use server'
Serializable types returned by Server Components - 'use client'
Server APIs for Node.js Streams - Server React DOM APIs
Server APIs for Web Streams - Server React DOM APIs
Server Components with a Server - Server Components
Server Components without a Server - Server Components
Server Functions in forms - 'use server'
Server Functions with Actions - Server Functions
Server Functions with Form Actions - Server Functions
Server Functions with useActionState - Server Functions
Set the document title - <title>
Setting state triggers renders - State as a Snapshot
Setting the status code - renderToPipeableStream
Setting the status code - renderToReadableStream
Setup for the tutorial - Tutorial: Tic-Tac-Toe
Share a snapshot of data - cache
Sharing data between components - Quick Start
Sharing logic between event handlers - You Might Not Need an Effect
Sharing state between components - Managing State
Should I try out the compiler? - React Compiler
Should this code move to an event handler? - Removing Effect Dependencies
Showing stale content while fresh content is loading - <Suspense>
Showing stale content while fresh content is loading - useDeferredValue
Showing the past moves - Tutorial: Tic-Tac-Toe
Side Effects: (un)intended consequences - Keeping Components Pure
Skipping expensive recalculations - useMemo
Skipping re-rendering of components - useCallback
Skipping re-rendering of components - useMemo
Skipping re-rendering when props are unchanged - memo
Skipping unnecessary re-renders for class components - PureComponent
SomeContext.Consumer - createContext
SomeContext.Provider - createContext
Something is not working after compilation - React Compiler
Source code directives - Directives
Specifying a custom comparison function - memo
Specifying a default value for a prop - Passing Props to a Component
Specifying a fallback default value - useContext
Specifying a shared prefix for all generated IDs - useId
Specifying reactive dependencies - useEffect
Specifying what goes into the shell - renderToPipeableStream
Specifying what goes into the shell - renderToReadableStream
Start From Scratch - Creating a React App
Start with the mockup - Thinking in React
State Hooks - Built-in React Hooks
State as a snapshot - Adding Interactivity
State is isolated and private - State: A Component's Memory
State is tied to a position in the render tree - Preserving and Resetting State
State over time - State as a Snapshot
State: a component’s memory - Adding Interactivity
Static APIs for Node.js Streams - Static React DOM APIs
Static APIs for Web Streams - Static React DOM APIs
Step 1: Break the UI into a component hierarchy - Thinking in React
Step 1: Create the context - Passing Data Deeply with Context
Step 1: Create the context - Scaling Up with Reducer and Context
Step 1: Declare an Effect - Synchronizing with Effects
Step 1: Export the component - Your First Component
Step 1: Identify your component’s different visual states - Reacting to Input with State
Step 1: Install a build tool - Build a React app from Scratch
Step 1: Move from setting state to dispatching actions - Extracting State Logic into a Reducer
Step 1: Pass props to the child component - Passing Props to a Component
Step 1: Remove state from the child components - Sharing State Between Components
Step 1: Set up a modular JavaScript environment - Add React to an Existing Project
Step 1: Trigger a render - Render and Commit
Step 2: Build Common Application Patterns - Build a React app from Scratch
Step 2: Build a static version in React - Thinking in React
Step 2: Define the function - Your First Component
Step 2: Determine what triggers those state changes - Reacting to Input with State
Step 2: Pass hardcoded data from the common parent - Sharing State Between Components
Step 2: Put state and dispatch into context - Scaling Up with Reducer and Context
Step 2: React renders your components - Render and Commit
Step 2: Read props inside the child component - Passing Props to a Component
Step 2: Render React components anywhere on the page - Add React to an Existing Project
Step 2: Specify the Effect dependencies - Synchronizing with Effects
Step 2: Use the context - Passing Data Deeply with Context
Step 2: Write a reducer function - Extracting State Logic into a Reducer
Step 3: Add cleanup if needed - Synchronizing with Effects
Step 3: Add markup - Your First Component
Step 3: Add state to the common parent - Sharing State Between Components
Step 3: Find the minimal but complete representation of UI state - Thinking in React
Step 3: Provide the context - Passing Data Deeply with Context
Step 3: React commits changes to the DOM - Render and Commit
Step 3: Represent the state in memory with useState - Reacting to Input with State
Step 3: Use context anywhere in the tree - Scaling Up with Reducer and Context
Step 3: Use the reducer from your component - Extracting State Logic into a Reducer
Step 4: Identify where your state should live - Thinking in React
Step 4: Remove any non-essential state variables - Reacting to Input with State
Step 5: Add inverse data flow - Thinking in React
Step 5: Connect the event handlers to set state - Reacting to Input with State
Stopping propagation - Responding to Events
Storing a history of moves - Tutorial: Tic-Tac-Toe
Storing information from previous renders - useState
Streaming data from the server to the client - use
Streaming more content as it loads - renderToPipeableStream
Streaming more content as it loads - renderToReadableStream
Style Props - Using TypeScript
Subscribing to a browser API - useSyncExternalStore
Subscribing to an external store - You Might Not Need an Effect
Subscribing to an external store - useSyncExternalStore
Subscribing to events - Synchronizing with Effects
Suppressing unavoidable hydration mismatch errors - hydrateRoot
Synchronizing with Effects - Escape Hatches
Taking turns - Tutorial: Tic-Tac-Toe
The Module Dependency Tree - Understanding Your UI as a Tree
The Owner Stack is null - captureOwnerStack
The Render Tree - Understanding Your UI as a Tree
The Rules of JSX - Writing Markup with JSX
The function I pass to startTransition executes immediately - useTransition
The lifecycle of an Effect - Lifecycle of Reactive Effects
The problem with passing props - Passing Data Deeply with Context
The root component file - Importing and Exporting Components
There is more than one way to do it - Reusing Logic with Custom Hooks
Thinking about UI declaratively - Reacting to Input with State
Thinking from the Effect’s perspective - Lifecycle of Reactive Effects
To change the dependencies, change the code - Removing Effect Dependencies
To remove a dependency, prove that it’s not a dependency - Removing Effect Dependencies
TouchEvent handler function - Common components (e.g. <div>)
Transforming an array - Updating Arrays in State
Transforming children - Children
TransitionEvent handler function - Common components (e.g. <div>)
Treat state as read-only - Updating Objects in State
Triggering animations - Synchronizing with Effects
Troubleshooting - React Compiler
Try React - Installation
TypeScript with React Components - Using TypeScript
UIEvent handler function - Common components (e.g. <div>)
UNSAFE_componentWillMount() - Component
UNSAFE_componentWillReceiveProps(nextProps, nextContext) - Component
UNSAFE_componentWillUpdate(nextProps, nextState) - Component
Updating a hydrated root component - hydrateRoot
Updating a memoized component using a context - memo
Updating a memoized component using state - memo
Updating a nested object - Updating Objects in State
Updating a root component - createRoot
Updating an input in a Transition doesn’t work - useTransition
Updating arrays in state - Adding Interactivity
Updating arrays without mutation - Updating Arrays in State
Updating data passed via context - useContext
Updating objects and arrays in state - useState
Updating objects in state - Adding Interactivity
Updating objects inside arrays - Updating Arrays in State
Updating state based on previous state from an Effect - useEffect
Updating state based on props or state - You Might Not Need an Effect
Updating state based on the previous state - useState
Updating state from a memoized callback - useCallback
Updating the same state multiple times before the next render - Queueing a Series of State Updates
Updating the screen - Quick Start
Usage - React Compiler
Usage - Server Functions
Use cases for context - Passing Data Deeply with Context
Use variables in the title - <title>
Useful Types - Using TypeScript
Using Hooks - Quick Start
Using React Compiler with React 17 or 18 - React Compiler
Using React Native in an existing native mobile app - Add React to an Existing Project
Using React for a part of your existing page - Add React to an Existing Project
Using React for an entire subroute of your existing website - Add React to an Existing Project
Using TypeScript - Setup
Using a component - Your First Component
Using and providing context from the same component - Passing Data Deeply with Context
Using client APIs - 'use client'
Using curly braces: A window into the JavaScript world - JavaScript in JSX with Curly Braces
Using information returned by a form action - useActionState
Using the compiler on libraries - React Compiler
Using the same ID prefix on the client and the server - useId
Using third-party libraries - 'use client'
Using “double curlies”: CSS and other objects in JSX - JavaScript in JSX with Curly Braces
Vite - Build a React app from Scratch
Vite - React Compiler
Waiting for all content to load for crawlers and static generation - renderToPipeableStream
Waiting for all content to load for crawlers and static generation - renderToReadableStream
Waiting for all data to load - prerender
Waiting for all data to load - prerenderToNodeStream
Webpack - React Compiler
What an Effect with empty dependencies means - Lifecycle of Reactive Effects
What are Effects and how are they different from events? - Synchronizing with Effects
What are you building? - Tutorial: Tic-Tac-Toe
What does the compiler assume? - React Compiler
What does the compiler do? - React Compiler
What happens if you replace state after updating it - Queueing a Series of State Updates
What happens if you update state after replacing it - Queueing a Series of State Updates
What the browser sees - Your First Component
What to do when you don’t want to re-synchronize - Lifecycle of Reactive Effects
What’s a mutation? - Updating Objects in State
What’s next? - Adding Interactivity
What’s next? - Describing the UI
What’s next? - Escape Hatches
What’s next? - Managing State
WheelEvent handler function - Common components (e.g. <div>)
When React attaches the refs - Manipulating the DOM with Refs
When a component suspends, the HTML always contains a fallback - renderToString
When a regular variable isn’t enough - State: A Component's Memory
When is it okay to have mutation? - Components and Hooks must be pure
When to use 'use client' - 'use client'
When to use custom Hooks - Reusing Logic with Custom Hooks
When to use refs - Referencing Values with Refs
Where to get your key - Rendering Lists
Where to go from here - Thinking in React
Where to use curly braces - JavaScript in JSX with Curly Braces
Where you can cause side effects - Keeping Components Pure
Why does React need keys? - Rendering Lists
Why immutability is important - Tutorial: Tic-Tac-Toe
Why synchronization may need to happen more than once - Lifecycle of Reactive Effects
Wrapping Effects in custom Hooks - useEffect
Wrapping up - Tutorial: Tic-Tac-Toe
Write concise update logic with Immer - Updating Arrays in State
Write concise update logic with Immer - Updating Objects in State
Writing concise reducers with Immer - Extracting State Logic into a Reducer
Writing markup with JSX - Describing the UI
Writing markup with JSX - Quick Start
Writing reducers well - Extracting State Logic into a Reducer
Writing the reducer function - useReducer
You Might Not Need An Effect - Escape Hatches
You might not need an Effect - Synchronizing with Effects
Your UI as a tree - Describing the UI
Your UI as a tree - Understanding Your UI as a Tree
Your editor - Editor Setup
Your first component - Describing the UI
Your own Hooks - Built-in React Hooks
Your own components - Built-in React Components
await act(async actFn) - act
cache(fn) - cache
captureOwnerStack is not available - captureOwnerStack
captureOwnerStack() - captureOwnerStack
cloneElement(element, props, ...children) - cloneElement
componentDidCatch(error, info) - Component
componentDidMount() - Component
componentDidUpdate(prevProps, prevState, snapshot?) - Component
componentWillMount() - Component
componentWillReceiveProps(nextProps) - Component
componentWillUnmount() - Component
componentWillUpdate(nextProps, nextState) - Component
constructor(props) - Component
context - Component
createContext(defaultValue) - createContext
createElement(type, props, ...children) - createElement
createPortal(children, domNode, key?) - createPortal
createRef() - createRef
createRoot(domNode, options?) - createRoot
dispatch function - useReducer
flushSync(callback) - flushSync
forceUpdate(callback?) - Component
forwardRef(render) - forwardRef
getSnapshotBeforeUpdate(prevProps, prevState) - Component
hydrateRoot(domNode, reactNode, options?) - hydrateRoot
isValidElement(value) - isValidElement
lazy(load) - lazy
load function - lazy
memo(Component, arePropsEqual?) - memo
onRender callback - <Profiler>
preconnect(href) - preconnect
prefetchDNS(href) - prefetchDNS
preinit(href, options) - preinit
preinitModule(href, options) - preinitModule
preload(href, options) - preload
preloadModule(href, options) - preloadModule
prerender(reactNode, options?) - prerender
prerenderToNodeStream(reactNode, options?) - prerenderToNodeStream
props - Component
ref callback function - Common components (e.g. <div>)
render function - forwardRef
render() - Component
renderToPipeableStream(reactNode, options?) - renderToPipeableStream
renderToReadableStream(reactNode, options?) - renderToReadableStream
renderToStaticMarkup(reactNode, options?) - renderToStaticMarkup
renderToString(reactNode, options?) - renderToString
root.render(reactNode) - createRoot
root.render(reactNode) - hydrateRoot
root.unmount() - createRoot
root.unmount() - hydrateRoot
set functions, like setSomething(nextState) - useState
setState(nextState, callback?) - Component
shouldComponentUpdate(nextProps, nextState, nextContext) - Component
startTransition(action) - startTransition
startTransition(action) - useTransition
state - Component
static contextType - Component
static defaultProps - Component
static getDerivedStateFromError(error) - Component
static getDerivedStateFromProps(props, state) - Component
status.pending is never true - useFormStatus
taintObjectReference(message, object) - experimental_taintObjectReference
taintUniqueValue(message, lifetime, value) - experimental_taintUniqueValue
use(resource) - use
useActionState(action, initialState, permalink?) - useActionState
useCallback - Using TypeScript
useCallback(fn, dependencies) - useCallback
useContext - Using TypeScript
useContext(SomeContext) - useContext
useDebugValue(value, format?) - useDebugValue
useDeferredValue(value, initialValue?) - useDeferredValue
useEffect(setup, dependencies?) - useEffect
useFormStatus() - useFormStatus
useId() - useId
useImperativeHandle(ref, createHandle, dependencies?) - useImperativeHandle
useInsertionEffect(setup, dependencies?) - useInsertionEffect
useLayoutEffect(setup, dependencies?) - useLayoutEffect
useMemo - Using TypeScript
useMemo(calculateValue, dependencies) - useMemo
useOptimistic(state, updateFn) - useOptimistic
useReducer - Using TypeScript
useReducer(reducer, initialArg, init?) - useReducer
useRef(initialValue) - useRef
useState - Using TypeScript
useState(initialState) - useState
useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot?) - useSyncExternalStore
useTransition() - useTransition
“Suspense Exception: This is not a real error!” - use