# React

> `act`is a test helper to apply pending React updates before making assertions.

## Pages

- [act](act.md): `act`is a test helper to apply pending React updates before making assertions.
- [<Activity>](activity.md): ``lets you hide and restore the UI and internal state of its children.
- [Add React to an Existing Project](add-react-to-an-existing-project.md): If you want to add some interactivity to your existing project, you don't have to rewrite it in React. Add React to y...
- [Adding Interactivity](adding-interactivity.md): Some things on the screen update in response to user input. For example, clicking an image gallery switches the activ...
- [addTransitionType](addtransitiontype.md): **The`addTransitionType`API is currently only available in React’s Canary and Experimental channels.**
- [Built-in React APIs](apis.md): In addition to [Hooks](/reference/react/hooks) and [Components](/reference/react/components), the`react`package exp...
- [Build a React app from Scratch](build-a-react-app-from-scratch.md): If your app has constraints not well-served by existing frameworks, you prefer to build your own framework, or you ju...
- [cache](cache.md): `cache`is only for use with [React Server Components](/reference/rsc/server-components).
- [cacheSignal](cachesignal.md): `cacheSignal`is currently only used with [React Server Components](/blog/2023/03/22/react-labs-what-we-have-been-wor...
- [captureOwnerStack](captureownerstack.md): `captureOwnerStack`reads the current Owner Stack in development and returns it as a string if available.
- [Children](children.md): Using`Children`is uncommon and can lead to fragile code. See common alternatives.
- [Choosing the State Structure](choosing-the-state-structure.md): Structuring state well can make a difference between a component that is pleasant to modify and debug, and one that i...
- [cloneElement](cloneelement.md): Using`cloneElement`is uncommon and can lead to fragile code. See common alternatives.
- [Common components (e.g. <div>)](common-eg-div.md): All built-in browser components, such as [``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div), su...
- [compilationMode](compilationmode.md): The`compilationMode`option controls how the React Compiler selects which functions to compile.
- [Compiling Libraries](compiling-libraries.md): This guide helps library authors understand how to use React Compiler to ship optimized library code to their users.
- [component-hook-factories](component-hook-factories.md): Validates against higher order functions defining nested components or hooks. Components and hooks should be defined ...
- [Component](component.md): We recommend defining components as functions instead of classes. See how to migrate.
- [Components and Hooks must be pure](components-and-hooks-must-be-pure.md): Pure functions only perform a calculation and nothing more. It makes your code easier to understand, debug, and allow...
- [Built-in React Components](components.md): React exposes a few built-in components that you can use in your JSX.
- [Conditional Rendering](conditional-rendering.md): Your components will often need to display different things depending on different conditions. In React, you can cond...
- [config](config.md): Validates the compiler [configuration options](/reference/react-compiler/configuration).
- [Configuration](configuration.md): This page lists all configuration options available in React Compiler.
- [createContext](createcontext.md): `createContext`lets you create a [context](/learn/passing-data-deeply-with-context) that components can provide or r...
- [createElement](createelement.md): `createElement`lets you create a React element. It serves as an alternative to writing [JSX.](/learn/writing-markup-...
- [createPortal](createportal.md): `createPortal`lets you render some children into a different part of the DOM.
- [createRef](createref.md): `createRef`is mostly used for [class components.](/reference/react/Component) Function components typically rely on ...
- [createRoot](createroot.md): `createRoot`lets you create a root to display React components inside a browser DOM node.
- [Creating a React App](creating-a-react-app.md): If you want to build a new app or website with React, we recommend starting with a framework.
- [Debugging and Troubleshooting](debugging-and-troubleshooting.md): This guide helps you identify and fix issues when using React Compiler. Learn how to debug compilation problems and r...
- [Describing the UI](describing-the-ui.md): React is a JavaScript library for rendering user interfaces (UI). UI is built from small units like buttons, text, an...
- [Directives](directives.md): Directives are for use in [React Server Components](/reference/rsc/server-components).
- [Editor Setup](editor-setup.md): A properly configured editor can make code clearer to read and faster to write. It can even help you catch bugs as yo...
- [error-boundaries](error-boundaries.md): Validates usage of Error Boundaries instead of try/catch for errors in child components.
- [Escape Hatches](escape-hatches.md): Some of your components may need to control and synchronize with systems outside of React. For example, you might nee...
- [exhaustive-deps](exhaustive-deps.md): Validates that dependency arrays for React hooks contain all necessary dependencies.
- [experimental_taintObjectReference](experimental-taintobjectreference.md): **This API is experimental and is not available in a stable version of React yet.**
- [experimental_taintUniqueValue](experimental-taintuniquevalue.md): **This API is experimental and is not available in a stable version of React yet.**
- [Extracting State Logic into a Reducer](extracting-state-logic-into-a-reducer.md): Components with many state updates spread across many event handlers can get overwhelming. For these cases, you can c...
- [flushSync](flushsync.md): Using`flushSync`is uncommon and can hurt the performance of your app.
- [<form>](form.md): The [built-in browser``component](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) lets you cr...
- [forwardRef](forwardref.md): In React 19,`forwardRef`is no longer necessary. Pass`ref`as a prop instead.
- [<Fragment> (<>...</>)](fragment.md): ``, often used via`<>...`syntax, lets you group elements without a wrapper node.
- [gating](gating.md): Validates configuration of [gating mode](/reference/react-compiler/gating).
- [globals](globals.md): Validates against assignment/mutation of globals during render, part of ensuring that [side effects must run outside ...
- [Built-in React Hooks](hooks.md): *Hooks* let you use different React features from your components. You can either use the built-in Hooks or combine t...
- [hydrateRoot](hydrateroot.md): `hydrateRoot`lets you display React components inside a browser DOM node whose HTML content was previously generated...
- [immutability](immutability.md): Validates against mutating props, state, and other values that [are immutable](/reference/rules/components-and-hooks-...
- [Importing and Exporting Components](importing-and-exporting-components.md): The magic of components lies in their reusability: you can create components that are composed of other components. B...
- [incompatible-library](incompatible-library.md): Validates against usage of libraries which are incompatible with memoization (manual or automatic).
- [Incremental Adoption](incremental-adoption.md): React Compiler can be adopted incrementally, allowing you to try it on specific parts of your codebase first. This gu...
- [<input>](input.md): The [built-in browser``component](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) lets you ...
- [Installation](installation.md): React has been designed from the start for gradual adoption. You can use as little or as much React as you need. Whet...
- [Introduction](introduction.md): React Compiler is a new build-time tool that automatically optimizes your React app. It works with plain JavaScript, ...
- [isValidElement](isvalidelement.md): `isValidElement`checks whether a value is a React element.
- [JavaScript in JSX with Curly Braces](javascript-in-jsx-with-curly-braces.md): JSX lets you write HTML-like markup inside a JavaScript file, keeping rendering logic and content in the same place. ...
- [Keeping Components Pure](keeping-components-pure.md): Some JavaScript functions are *pure.* Pure functions only perform a calculation and nothing more. By strictly only wr...
- [lazy](lazy.md): `lazy`lets you defer loading component's code until it is rendered for the first time.
- [Legacy React APIs](legacy-react-apis.md): These APIs are exported from the`react`package, but they are not recommended for use in newly written code. See the...
- [Lifecycle of Reactive Effects](lifecycle-of-reactive-effects.md): Effects have a different lifecycle from components. Components may mount, update, or unmount. An Effect can only do t...
- [Link](link.md): The [built-in browser``component](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link) lets you us...
- [logger](logger.md): The`logger`option provides custom logging for React Compiler events during compilation.
- [Managing State](managing-state.md): As your application grows, it helps to be more intentional about how your state is organized and how the data flows b...
- [Manipulating the DOM with Refs](manipulating-the-dom-with-refs.md): React automatically updates the [DOM](https://developer.mozilla.org/docs/Web/API/Document_Object_Model/Introduction) ...
- [memo](memo.md): `memo`lets you skip re-rendering a component when its props are unchanged.
- [Meta](meta.md): The [built-in browser``component](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta) lets you ad...
- [<option>](option.md): The [built-in browser``component](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option) lets yo...
- [panicThreshold](panicthreshold.md): The`panicThreshold`option controls how the React Compiler handles errors during compilation.
- [Passing Data Deeply with Context](passing-data-deeply-with-context.md): Usually, you will pass information from a parent component to a child component via props. But passing props can beco...
- [Passing Props to a Component](passing-props-to-a-component.md): React components use *props* to communicate with each other. Every parent component can pass some information to its ...
- [preconnect](preconnect.md): `preconnect`lets you eagerly connect to a server that you expect to load resources from.
- [prefetchDNS](prefetchdns.md): `prefetchDNS`lets you eagerly look up the IP of a server that you expect to load resources from.
- [preinit](preinit.md): [React-based frameworks](/learn/start-a-new-react-project) frequently handle resource loading for you, so you might n...
- [preinitModule](preinitmodule.md): [React-based frameworks](/learn/start-a-new-react-project) frequently handle resource loading for you, so you might n...
- [preload](preload.md): [React-based frameworks](/learn/start-a-new-react-project) frequently handle resource loading for you, so you might n...
- [preloadModule](preloadmodule.md): [React-based frameworks](/learn/start-a-new-react-project) frequently handle resource loading for you, so you might n...
- [preserve-manual-memoization](preserve-manual-memoization.md): Validates that existing manual memoization is preserved by the compiler. React Compiler will only compile components ...
- [Preserving and Resetting State](preserving-and-resetting-state.md): State is isolated between components. React keeps track of which state belongs to which component based on their plac...
- [<Profiler>](profiler.md): ``lets you measure rendering performance of a React tree programmatically.
- [<progress>](progress.md): The [built-in browser``component](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress) let...
- [PureComponent](purecomponent.md): We recommend defining components as functions instead of classes. See how to migrate.
- [purity](purity.md): Validates that [components/hooks are pure](/reference/rules/components-and-hooks-must-be-pure) by checking that they ...
- [Queueing a Series of State Updates](queueing-a-series-of-state-updates.md): Setting a state variable will queue another render. But sometimes you might want to perform multiple operations on th...
- [React calls Components and Hooks](react-calls-components-and-hooks.md): React is responsible for rendering components and Hooks when necessary to optimize the user experience. It is declara...
- [Yarn](react-developer-tools.md): Use React Developer Tools to inspect React [components](/learn/your-first-component), edit [props](/learn/passing-pro...
- [React Performance tracks](react-performance-tracks.md): React Performance tracks are specialized custom entries that appear on the Performance panel's timeline in your brows...
- [Reacting to Input with State](reacting-to-input-with-state.md): React provides a declarative way to manipulate the UI. Instead of manipulating individual pieces of the UI directly, ...
- [Referencing Values with Refs](referencing-values-with-refs.md): When you want a component to "remember" some information, but you don't want that information to [trigger new renders...
- [refs](refs.md): Validates correct usage of refs, not reading/writing during render. See the "pitfalls" section in [`useRef()`usage](...
- [Removing Effect Dependencies](removing-effect-dependencies.md): When you write an Effect, the linter will verify that you've included every reactive value (like props and state) tha...
- [Render and Commit](render-and-commit.md): Before your components are displayed on screen, they must be rendered by React. Understanding the steps in this proce...
- [Rendering Lists](rendering-lists.md): You will often want to display multiple similar components from a collection of data. You can use the [JavaScript arr...
- [renderToStaticMarkup](rendertostaticmarkup.md): `renderToStaticMarkup`renders a non-interactive React tree to an HTML string.
- [renderToString](rendertostring.md): `renderToString`does not support streaming or waiting for data. See the alternatives.
- [Responding to Events](responding-to-events.md): React lets you add *event handlers* to your JSX. Event handlers are your own functions that will be triggered in resp...
- [Reusing Logic with Custom Hooks](reusing-logic-with-custom-hooks.md): React comes with several built-in Hooks like`useState`,`useContext`, and`useEffect`. Sometimes, you'll wish that t...
- [Rules of Hooks](rules-of-hooks.md): Hooks are defined using JavaScript functions, but they represent a special type of reusable UI logic with restriction...
- [Scaling Up with Reducer and Context](scaling-up-with-reducer-and-context.md): Reducers let you consolidate a component's state update logic. Context lets you pass information deep down to other c...
- [Script](script.md): The [built-in browser``component](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script) lets yo...
- [<select>](select.md): The [built-in browser``component](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select) lets yo...
- [Separating Events from Effects](separating-events-from-effects.md): Event handlers only re-run when you perform the same interaction again. Unlike event handlers, Effects re-synchronize...
- [Server Components](server-components.md): Server Components are a new type of Component that renders ahead of time, before bundling, in an environment separate...
- [Server Functions](server-functions.md): Server Functions are for use in [React Server Components](/reference/rsc/server-components).
- [set-state-in-effect](set-state-in-effect.md): Validates against calling setState synchronously in an effect, which can lead to re-renders that degrade performance.
- [set-state-in-render](set-state-in-render.md): Validates against unconditionally setting state during render, which can trigger additional renders and potential inf...
- [Setup](setup.md): React integrates with tools like editors, TypeScript, browser extensions, and compilers. This section will help you g...
- [Sharing State Between Components](sharing-state-between-components.md): Sometimes, you want the state of two components to always change together. To do it, remove state from both of them, ...
- [startTransition](starttransition.md): `startTransition`lets you render a part of the UI in the background.
- [State: A Component's Memory](state-a-components-memory.md): Components often need to change what's on the screen as a result of an interaction. Typing into the form should updat...
- [State as a Snapshot](state-as-a-snapshot.md): State variables might look like regular JavaScript variables that you can read and write to. However, state behaves m...
- [static-components](static-components.md): Validates that components are static, not recreated every render. Components that are recreated dynamically can reset...
- [<StrictMode>](strictmode.md): ``lets you find common bugs in your components early during development.
- [Style](style.md): The [built-in browser``component](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style) lets you ...
- [<Suspense>](suspense.md): ``lets you display a fallback until its children have finished loading.
- [Synchronizing with Effects](synchronizing-with-effects.md): Some components need to synchronize with external systems. For example, you might want to control a non-React compone...
- [target](target.md): The`target`option specifies which React version the compiler should generate code for.
- [<textarea>](textarea.md): The [built-in browser``component](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea) let...
- [Thinking in React](thinking-in-react.md): React can change how you think about the designs you look at and the apps you build. When you build a user interface ...
- [<title>](title.md): The [built-in browser``component](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/title) lets you ...
- [Tutorial: Tic-Tac-Toe](tutorial-tic-tac-toe.md): You will build a small tic-tac-toe game during this tutorial. This tutorial does not assume any existing React knowle...
- [unsupported-syntax](unsupported-syntax.md): Validates against syntax that React Compiler does not support. If you need to, you can still use this syntax outside ...
- [Updating Arrays in State](updating-arrays-in-state.md): Arrays are mutable in JavaScript, but you should treat them as immutable when you store them in state. Just like with...
- [Updating Objects in State](updating-objects-in-state.md): State can hold any kind of JavaScript value, including objects. But you shouldn't change objects that you hold in the...
- ['use client'](use-client.md): `'use client'`is for use with [React Server Components](/reference/rsc/server-components).
- [use-memo](use-memo.md): Validates that the`useMemo`hook is used with a return value. See [`useMemo`docs](/reference/react/useMemo) for mor...
- [use no memo](use-no-memo.md): `"use no memo"`prevents a function from being optimized by React Compiler.
- ['use server'](use-server.md): `'use server'`is for use with [using React Server Components](/reference/rsc/server-components).
- [use](use.md): `use`is a React API that lets you read the value of a resource like a [Promise](https://developer.mozilla.org/en-US/...
- [useActionState](useactionstate.md): `useActionState`is a Hook that allows you to update state based on the result of a form action.
- [useCallback](usecallback.md): `useCallback`is a React Hook that lets you cache a function definition between re-renders.
- [useContext](usecontext.md): `useContext`is a React Hook that lets you read and subscribe to [context](/learn/passing-data-deeply-with-context) f...
- [useDebugValue](usedebugvalue.md): `useDebugValue`is a React Hook that lets you add a label to a custom Hook in [React DevTools.](/learn/react-develope...
- [useDeferredValue](usedeferredvalue.md): `useDeferredValue`is a React Hook that lets you defer updating a part of the UI.
- [useEffect](useeffect.md): `useEffect`is a React Hook that lets you [synchronize a component with an external system.](/learn/synchronizing-wit...
- [useEffectEvent](useeffectevent.md): `useEffectEvent`is a React Hook that lets you extract non-reactive logic from your Effects into a reusable function ...
- [useFormStatus](useformstatus.md): `useFormStatus`is a Hook that gives you status information of the last form submission.
- [useId](useid.md): `useId`is a React Hook for generating unique IDs that can be passed to accessibility attributes.
- [useImperativeHandle](useimperativehandle.md): `useImperativeHandle`is a React Hook that lets you customize the handle exposed as a [ref.](/learn/manipulating-the-...
- [useInsertionEffect](useinsertioneffect.md): `useInsertionEffect`is for CSS-in-JS library authors. Unless you are working on a CSS-in-JS library and need a place...
- [useLayoutEffect](uselayouteffect.md): `useLayoutEffect`can hurt performance. Prefer [`useEffect`](/reference/react/useEffect) when possible.
- [useMemo](usememo.md): `useMemo`is a React Hook that lets you cache the result of a calculation between re-renders.
- [useOptimistic](useoptimistic.md): `useOptimistic`is a React Hook that lets you optimistically update the UI.
- [useReducer](usereducer.md): `useReducer`is a React Hook that lets you add a [reducer](/learn/extracting-state-logic-into-a-reducer) to your comp...
- [useRef](useref.md): `useRef`is a React Hook that lets you reference a value that's not needed for rendering.
- [useState](usestate.md): `useState`is a React Hook that lets you add a [state variable](/learn/state-a-components-memory) to your component.
- [useSyncExternalStore](usesyncexternalstore.md): `useSyncExternalStore`is a React Hook that lets you subscribe to an external store.
- [useTransition](usetransition.md): `useTransition`is a React Hook that lets you render a part of the UI in the background.
- [Using TypeScript](using-typescript.md): TypeScript is a popular way to add type definitions to JavaScript codebases. Out of the box, TypeScript [supports JSX...
- [<ViewTransition>](viewtransition.md): **The``API is currently only available in React’s Canary and Experimental channels.**
- [Writing Markup with JSX](writing-markup-with-jsx.md): *JSX* is a syntax extension for JavaScript that lets you write HTML-like markup inside a JavaScript file. Although th...
- [You Might Not Need an Effect](you-might-not-need-an-effect.md): Effects are an escape hatch from the React paradigm. They let you "step outside" of React and synchronize your compon...
- [Your First Component](your-first-component.md): *Components* are one of the core concepts of React. They are the foundation upon which you build user interfaces (UI)...
- [Understanding Your UI as a Tree](your-ui-as-a-tree.md): Your React app is taking shape with many components being nested within each other. How does React keep track of your...