React Tutorial
Learn React
Build interactive UIs with components, state and hooks.
01
Getting Started
03
Components & Props
05
Hooks
06
Rendering & Lists
08
Context & State Management
09
Data Fetching & Effects
10
Performance & Patterns
12
Advanced Hooks & Patterns
13
Component Patterns
React Reference
93 pages · 15 groups · syntax, parameters and worked examples
State Hooks4
useStateAdds a local state variable to a function component and re-renders it whenever that value changes.useReducerManages component state through a pure reducer function that maps the current state and an action to the next state.useOptimisticShows a temporary expected state while an async Action is pending, then falls back to the real value.useActionStateWraps an action so its return value becomes state and exposes a pending flag while it runs.
Context & Ref Hooks3
Effect Hooks4
useEffectSynchronizes a component with an external system after render, with an optional cleanup on teardown.useLayoutEffectRuns an effect after DOM mutation but before the browser paints, so you can measure and reposition without flicker.useInsertionEffectInjects DOM elements such as style rules before any layout effects fire, for CSS-in-JS library authors.useEffectEventExtracts non-reactive logic from an Effect so it reads the latest props and state without re-running the Effect.
Performance Hooks4
useMemoCaches the result of a calculation between re-renders until one of its dependencies changes.useCallbackCaches a function definition between re-renders so its identity stays stable until dependencies change.useTransitionMarks state updates as non-blocking Transitions and reports whether one is still pending.useDeferredValueDefers part of the UI so an expensive view lags behind while the rest of the page stays responsive.
Other Hooks3
useIdGenerate a stable, unique id string for accessibility attributes that matches between server and client.useSyncExternalStoreSubscribe a component to an external store and read a consistent snapshot on every render.useDebugValueLabel a custom Hook's value in React DevTools so its internals are readable while debugging.
Built-in Components5
<Fragment>Groups a list of children under one JSX element without adding a wrapper node to the DOM.<Suspense>Shows a fallback UI until the children inside the boundary have finished loading.<StrictMode>Turns on extra development-only checks for the components inside it to surface common bugs early.<Profiler>Measures how often a React tree renders and how long each of its commits costs.<Activity>Hides or shows part of the UI while keeping its state, so it can be restored or pre-rendered.
Top-Level APIs10
createContextCreates a context object so components can provide a value and read it anywhere below without props.memoSkips re-rendering a component when its parent re-renders but its props have not changed.lazyDefers loading a component's code until it is first rendered, suspending while that code arrives.forwardRefLets a component expose a DOM node to its parent by forwarding the ref it receives.startTransitionMarks state updates as non-blocking Transitions so urgent input stays responsive.useReads the value of a promise or a context during render, including inside conditions and loops.actFlushes React renders, effects and updates in tests so assertions see the finished DOM.cacheCaches a function's result per server request so repeated calls with the same arguments run once.cacheSignalReturns an AbortSignal that fires when the surrounding server render's cache lifetime ends.captureOwnerStackReturns the current Owner Stack as a string in development builds, for richer error logging.
Legacy APIs7
createElementCreates a React element without JSX, taking a type, a props object and any number of children.cloneElementCreates a copy of an existing React element with extra or overridden props.isValidElementChecks whether a value is a React element rather than a string, number, array or arbitrary object.ChildrenProvides helpers for counting, mapping and flattening the opaque children prop.createRefCreates a mutable ref object for a class component to hold a DOM node or arbitrary value.ComponentDefines a React component as a JavaScript class with state, lifecycle methods and instance fields.PureComponentSkips re-rendering a class component when its props and state are shallowly unchanged.
react-dom APIs8
createPortalRenders children into a different DOM node while keeping them in the same React tree.flushSyncForces React to apply the state updates in a callback and update the DOM synchronously.preloadTells the browser to start downloading a resource it will need soon, without executing it.preinitDownloads and immediately evaluates a script, or inserts a stylesheet so its rules apply at once.preconnectHints that the browser should open a connection to a server you will request resources from.prefetchDNSHints that the browser should resolve a hostname's IP address before you request anything from it.preloadModuleTells the browser to download an ESM module ahead of time without evaluating it.preinitModuleDownloads an ESM module and evaluates it immediately rather than waiting for an import.
Client APIs4
createRootCreates a React root for a browser DOM node so you can display React components inside it.root.render()Displays a React node inside a root, updating the existing tree when called again.root.unmount()Destroys a rendered React tree and detaches React from its container DOM node.hydrateRootAttaches React to server-rendered HTML already inside a browser DOM node.
Server Rendering APIs6
renderToStringRenders a React tree to an HTML string on the server, without streaming or waiting for data.renderToStaticMarkupRenders a React tree to plain HTML with no hydration markers, for output that never becomes interactive.renderToPipeableStreamStreams a React tree as HTML into a Node.js writable stream, flushing Suspense content as it resolves.renderToReadableStreamStreams a React tree as HTML into a Web ReadableStream for edge and worker runtimes.prerenderRenders a React tree to a static HTML Web Stream at build time, after all data has loaded.prerenderToNodeStreamRenders a React tree to a static HTML Node.js stream at build time, once all data has resolved.
Forms & Form Components9
<form>Submits a form by running a JavaScript function instead of navigating to a URL.useFormStatusReads the pending state and submitted data of the nearest parent form from a child component.<input>Renders a browser form control that React can drive from state or leave to the DOM.<select>Renders a dropdown whose selected option React sets with value or defaultValue.<textarea>Renders a multi-line text box whose starting text comes from defaultValue, not children.<option>Declares one choice inside a dropdown, carrying the value submitted with the form.<progress>Displays a determinate or indeterminate progress bar from a numeric value and max.Controlled inputsDrives a form field entirely from React state by pairing value with an onChange handler.Uncontrolled inputsLets the DOM own a field's value, seeding it with defaultValue and reading it through a ref.
Built-in Browser Components6
Common props (<div>)Accepts the shared prop surface every DOM element supports: className, style, id, refs and event handlers.<style>Renders an inline CSS stylesheet that React hoists into the document head and de-duplicates by href.<link>Declares a linked resource such as a stylesheet, preload or icon that React hoists into the document head.<meta>Attaches document metadata such as description, keywords or Open Graph tags, hoisted into the head.<script>Loads an external or inline script, hoisting and de-duplicating it by src when marked async.<title>Sets the document title shown in the browser tab and search results, hoisted into the head.
JSX Essentials14
{...props}Copies every own property of an object onto a JSX element as props in a single expression.{/* comment */}Annotate JSX without rendering anything by wrapping a JavaScript comment in curly braces.keyIdentify an element among its siblings so React preserves its state and DOM across reorders.refGet the underlying DOM node for an element, passed as an ordinary prop since React 19.childrenReceive whatever JSX is nested inside a component's tags and render it wherever you want.dangerouslySetInnerHTMLReplace an element's contents with a raw, trusted HTML string instead of React children.classNameSet an element's CSS classes; JSX uses className because class is reserved in JavaScript.htmlForLink a label to a form control by id; htmlFor is JSX's name for the HTML for attribute.styleApply inline CSS from a JavaScript object with camelCased properties and automatic px units.Event handlersRespond to user interaction with camelCased props such as onClick and onChange.Conditional renderingShow different markup with a ternary, &&, or an early return, since JSX is just an expression.List renderingTurn an array into elements with map, filtering first and giving every item a stable key.<>...</>Group sibling elements without adding a wrapper node to the DOM.Curly bracesEmbed JavaScript expressions inside markup and attributes with { }.
Server Components & Directives6
Server ComponentsRender components ahead of time on a server or at build time, outside the client bundle.Server FunctionsLet Client Components call async functions that execute on the server over the network.'use client'Mark a module and its dependencies as client code, creating a boundary from server-rendered code.'use server'Mark an async function, or a whole module, as callable by the client over the network.experimental_taintObjectReferenceBlock a specific object from being passed unchanged to a Client Component.experimental_taintUniqueValueBlock a specific high-entropy string or byte sequence from being passed to a Client Component.