API reference

React 19+ API reference

advanced React 19 patterns and performance

Identifiers: 101
With full guides: 68
Types: 7

Topics covered

The use() hook
Actions & useActionState
useOptimistic
Server Components
Suspense & transitions
Memoisation done right
Refs & imperative handle
Concurrent rendering

Class

Name	What it does
`PureComponent`	PureComponent is a React class base that shallowly compares props and state to skip unnecessary re-renders. It supports the Component APIs but is mainly intended for existing class components, since new code should generally use functions.
`Component`	React.Component is the base class for class-based React components. Extend it and implement render; however, function components are recommended for new code.

Component

Name	What it does
`Suspense`	Suspense displays a fallback while descendant UI is not ready, then reveals that UI when it can render. Use boundaries to define loading regions and coordinate progressive or streamed content.
`StrictMode`	StrictMode enables extra development-only checks for a component subtree. It helps reveal impure rendering, missing Effect or ref cleanup, and deprecated API usage early.
`Fragment`	Fragment groups multiple JSX elements without adding a wrapper node to the DOM. Use <>...</> for simple groups, or explicit <Fragment> when a key or ref is needed.
`Profiler`	`<Profiler>` measures a React subtree’s rendering performance programmatically. Give it an `id` and an `onRender` callback to receive information about committed updates and their timing.
`SuspenseList`	Component
`ViewTransition`	`<ViewTransition>` opts a component subtree into browser View Transition animations during React Transitions and Suspense updates. It is currently available only in React’s Canary and Experimental channels.
`Activity`	`<Activity>` hides or reveals children while preserving their UI, internal state, and DOM. Hidden boundaries clean up Effects and process updates at lower priority; visible boundaries restore state and recreate Effects.

Function

Name	What it does
`memo`	memo wraps a component so React can skip parent-driven re-renders when its props are unchanged. It improves performance opportunistically, but does not guarantee that a component will never render.
`startTransition`	startTransition marks synchronous state updates as non-urgent Transitions. React can render the affected UI in the background while keeping urgent interactions responsive.
`createContext`	createContext creates a context object with a static fallback value. Providers supply values to descendants, which can read the nearest value with useContext.
`lazy`	`lazy` defers loading a component’s code until its first render. Wrap the lazy component, or an ancestor, in `Suspense` to show fallback content while the module loads.
`createPortal`	createPortal renders React children into a different part of the DOM while keeping them in the rendering component's React tree. It is commonly used for modals, tooltips, and other UI that must escape a container.
`flushSync`	flushSync forces React to synchronously process updates inside a callback, making the DOM update immediately. Use it sparingly, mainly when integrating with code that needs to read the DOM right away.
`createRoot`	createRoot creates a React root connected to a browser DOM element. Call the returned root.render to display React content, or root.unmount to remove the rendered tree.
`hydrateRoot`	hydrateRoot attaches React to HTML previously rendered on the server, making it interactive in the browser. The client React tree must produce output identical to the server-rendered HTML.
`cache`	`cache` memoizes a function's results for React Server Components during a server request. Matching arguments reuse prior work, while cache misses execute and store the function result.
`forwardRef`	forwardRef lets a component expose a child DOM node or imperative handle through a parent ref. In React 19, it is no longer necessary for function components because ref can be received directly as a prop, and it will be deprecated in a future release.
`cloneElement`	Creates a new React element from an existing valid element, selectively overriding its props, key, ref, or children. The original element remains unchanged.
`isValidElement`	Checks whether a value is a React element. It recognizes JSX and createElement results, but not every renderable React node.
`createElement`	createElement constructs a React element from a type, props, and optional children. It is the programmatic alternative to JSX when direct element construction is needed.
`act`	act is a test helper that flushes React updates caused by rendering and interactions before assertions. Use its asynchronous form to make test behavior closer to React in the browser.
`createRef`	Function
`preload`	`preload` from `react-dom` gives the browser an early hint to fetch a resource you expect to use. It can reduce waiting for fonts, stylesheets, images, scripts, and other supported resources.
`preinit`	`preinit` from `react-dom` eagerly fetches and initializes an external script or stylesheet. Scripts execute after download; stylesheets are inserted and applied immediately.
`preconnect`	`preconnect` hints that the browser should establish a connection to a server whose resources you expect to request. Calling it early can reduce resource-loading latency if the browser honors the hint.
`prefetchDNS`	Hints that the browser should resolve a server's IP address ahead of an expected resource request. Use it to reduce DNS delay for anticipated external resources, while remembering that the browser may ignore the hint.
`requestFormReset`	Function
`createFactory`	Function
`findDOMNode`	`findDOMNode` located the closest browser DOM node rendered by a mounted class-component instance. React 19 removed this deprecated legacy API; use a direct DOM ref instead.
`useFormState`	Function
`hydrate`	Function
`render`	Deprecated legacy API that mounts a React node into a browser DOM element. React 19+ code should use createRoot from react-dom/client instead.
`renderToString`	Renders a React tree to an HTML string, typically on the server for the initial page response. Hydrate the resulting markup with hydrateRoot in the browser to make it interactive.
`renderToStaticMarkup`	Renders a non-interactive React tree to an HTML string, typically on the server. Its output cannot be hydrated, so use it for static markup rather than interactive applications.
`renderToReadableStream`	Renders a complete React tree as HTML into a Web ReadableStream, intended for streaming server rendering in Web Streams environments. The returned promise resolves when the shell is ready.
`renderToPipeableStream`	Renders a React tree as HTML into a pipeable Node.js Stream. Use onShellReady for progressive streaming or onAllReady when the complete output must be ready first.
`prerender`	`prerender` asynchronously generates static HTML for a React tree as a Web Stream. It waits for data required by Suspense before resolving, making it suitable for static site generation.
`prerenderToNodeStream`	Pre-renders a complete React tree to static HTML through a Node.js Stream. It waits for required data before resolving, making it useful for static site generation.
`unstable_batchedUpdates`	Function

Hook

Name	What it does
`useState`	Hook
`useEffect`	Hook
`useMemo`	useMemo caches the result of a calculation between component renders. React reuses that result while its dependencies remain unchanged and recalculates it when they change.
`useCallback`	useCallback caches a function definition between component renders. React reuses the cached function while its dependencies remain unchanged.
`useRef`	Hook
`useContext`	useContext reads and subscribes a component to a context. It returns the nearest provider's value, or the context's defaultValue when no provider is above the component.
`use`	React's use API reads a Promise or context during rendering. Promise reads suspend while pending, and unlike ordinary Hooks, use can be called in conditions and loops.
`useActionState`	useActionState updates component state from a form action's result. It returns the latest state, a form-compatible action, and a pending flag.
`useOptimistic`	useOptimistic lets a component display temporary optimistic state while an Action is pending. After the Action finishes or errors, React returns to the source value.
`useFormStatus`	`useFormStatus` lets a component rendered inside a form read the status of its parent form submission. Use it to show pending UI, inspect submitted data, or access the form method and function action.
`useTransition`	useTransition lets a component mark non-urgent state updates as background Transitions. It returns a pending flag and a function for starting them.
`useDeferredValue`	useDeferredValue lets you defer updating a non-critical part of the UI so urgent updates can appear first. It returns a value that may temporarily lag behind the latest input.
`useReducer`	Hook
`useId`	useId generates unique strings for connecting elements through accessibility attributes. Call it at the top level of a component or custom Hook, with no arguments.
`useImperativeHandle`	useImperativeHandle customizes the value exposed through a ref. In React 19, a component can receive ref as a prop and expose a restricted object of imperative methods instead of its underlying DOM node.
`useLayoutEffect`	useLayoutEffect runs before the browser repaints, making it suitable for layout reads and visual corrections that must not flicker. Prefer useEffect unless the work must happen before paint.
`useSyncExternalStore`	useSyncExternalStore lets a component read from and subscribe to an external store. It supports server rendering through an optional server snapshot and re-renders when the snapshot changes.
`useDebugValue`	useDebugValue lets a custom Hook expose a readable label or value in React DevTools. An optional formatter controls how the value appears when the component is inspected.
`useInsertionEffect`	useInsertionEffect lets CSS-in-JS libraries insert styles before layout effects run. It is a specialized client-side hook, not a general replacement for useEffect or useLayoutEffect.

Type Alias

Name	What it does
`ReactNode`	Type Alias
`ReactElement`	React elements are UI descriptions created by JSX or createElement. Use isValidElement to distinguish them from other React nodes and arbitrary values.
`FC`	Type Alias
`PropsWithChildren`	Type Alias
`ComponentProps`	Type Alias
`ComponentPropsWithoutRef`	Type Alias
`ComponentPropsWithRef`	Type Alias
`ComponentType`	Type Alias
`ElementType`	Type Alias
`RefObject`	Type Alias
`MutableRefObject`	MutableRefObject is the pre-React-19 TypeScript concept for a ref whose current value can be assigned. In React 19, useRef returns the unified mutable RefObject shape instead; useRef requires an initial argument.
`Dispatch`	Dispatch is the function returned by useReducer for requesting a state update. Pass it one action; React gives that action and the current state to the reducer, then re-renders with the reducer's result.
`SetStateAction`	SetStateAction<S> is the union accepted by a React state setter: either a value of type S or a function that calculates the next S from previous state. It supports direct replacement and state-dependent updates.
`Reducer`	Reducer is the function passed to useReducer to define how actions transform current state into next state. React calls it during dispatch and uses its return value for the next render.
`Context`	createContext defines a context object for passing information through a component tree without explicitly forwarding it as props. Its default value is used only when no matching provider is found above the reader.
`Ref`	Type Alias
`Key`	Type Alias
`CSSProperties`	React.CSSProperties types an object passed to a component’s style prop. It supports valid CSS properties and editor autocomplete for inline styles.
`SyntheticEvent`	React.SyntheticEvent is the general TypeScript type for React event objects. It follows the DOM Event model while smoothing over browser inconsistencies and exposing the original event through nativeEvent.
`ChangeEvent`	React.ChangeEvent<T> types a React DOM change event for a specific element type. Use it most directly when an extracted handler needs an explicit event annotation.
`MouseEvent`	MouseEvent is React’s handler type for mouse interactions on built-in elements. Its event object exposes button state, modifier keys, coordinates, movement, and the related target.
`FormEvent`	Type Alias
`KeyboardEvent`	Type Alias
`FocusEvent`	React.FocusEvent is the event type for React focus handlers such as onFocus and onBlur. Its bubbling behavior lets parent handlers analyze focus movement using event targets and relatedTarget.
`PointerEvent`	PointerEvent is React’s handler type for pointer interactions on DOM components. Its event object combines pointer-specific information with inherited mouse-event properties.
`RefCallback`	RefCallback is the function form of a React ref. React calls it with the attached DOM node and, in React 19, can run a cleanup function returned by the callback when the node detaches.
`ForwardRefRenderFunction`	ForwardRefRenderFunction is the render-callback shape used by React's forwardRef pattern: it receives props and a ref and returns JSX. In React 19, new components should generally accept ref as a prop directly because forwardRef is no longer necessary.
`ElementRef`	Type Alias
`ComponentRef`	Type Alias
`ReactPortal`	createPortal renders React children into a different part of the DOM while preserving their place in the React tree. It is commonly used for UI such as modals that must escape container boundaries.
`Usable`	Type Alias
`ExoticComponent`	Type Alias
`JSX.Element`	Type Alias
`PropsWithRef`	Type Alias
`DependencyList`	DependencyList is the fixed-length array of reactive values used by React hooks such as useMemo, useEffect, and useCallback. React compares each entry with its previous value using Object.is to decide whether dependent work should run again.
`EffectCallback`	Type Alias
`TransitionFunction`	Type Alias

Const

Name	What it does
`Children`	`Children` provides utilities for counting, iterating, transforming, asserting, and normalizing a component’s `children` prop. Because `children` is opaque, use these methods instead of assuming an array shape.
`version`	Const

Directive

Name	What it does
`use client`	The 'use client' directive marks a module and its transitive dependencies as client code in React Server Components. It creates a server-client boundary so interactive components can run in the browser.
`use server`	`'use server'` marks an async server-side function as callable from client-side code. Client calls become network requests, with serializable arguments and results handled by the framework.

Search across every package and filter by type in your dashboard.

Start learning