Overview
React 19.3 (released 2026-09-09) is the current line. React 19.0 added Actions, use(), and ref as a prop; 19.2 added <Activity> and useEffectEvent; 19.3 made <ViewTransition> and Fragment refs stable. The React Compiler 1.0 is stable but opt-in. This page holds the umbrella rules and the API map; each topic has its own page.
Compose components, do not inherit
Build with small components, children as the extension point, and prop-driven variants. When two components share logic, extract a hook or a utility, not a base component. Pair composition with the semantic HTML and keyboard rules in accessibility.
<Card>
<Card.Header>Title</Card.Header>
<Card.Body><Stats data={data} /></Card.Body>
</Card>Use the 19.x API instead of the older pattern
| Need | Use | Since |
|---|---|---|
| Read a promise or context during render, including inside a condition | use() | 19.0 |
| Async form submit with pending and error state | <form action>, useActionState, useFormStatus | 19.0 |
| Optimistic UI while an Action runs | useOptimistic (call the setter inside an Action or transition) | 19.0 |
| Ref on a function component | ref as a plain prop, no forwardRef | 19.0 |
| Context provider | <ThemeContext value={...}> | 19.0 |
| Title and meta tags from any component | render <title>, <meta>, <link> inline; React hoists them to <head> | 19.0 |
| Report errors from the root | createRoot options onCaughtError, onUncaughtError, onRecoverableError | 19.0 |
| Hide UI but keep its state, pausing its effects | <Activity mode="hidden"> | 19.2 |
| Non-reactive logic inside an Effect | useEffectEvent (never list it in dependency arrays) | 19.2 |
| Animate Transition and Suspense updates | <ViewTransition> | 19.3 |
| Ref to a group of sibling nodes | <Fragment ref> | 19.3 |
Error boundaries are the one remaining reason to write a class component; see react-error-boundaries.
Colocate state, lift only when shared
Keep state in the component that uses it and lift it to the lowest common ancestor only when siblings share it. Keep server data out of client state. The decision tree lives in react-state-management; the hook rules live in react-hooks.
Skip manual memoization until you measure
The compiler memoizes components and hooks automatically once the plugin is enabled, and nothing memoizes for you before that. In either case, add useMemo or useCallback only when a profile shows a cost. Details: react-compiler and react-performance.
Server components by default, client components at the leaves
In an RSC framework such as Next.js or Waku, components render on the server unless the file starts with "use client". Mark a file for state, effects, event handlers, or browser-only libraries, and keep the boundary at the interactive leaf. See react-server-components, server-vs-client-components, and nextjs. For loading states and transitions, see react-suspense. For JSX and typed component signatures, see tsx-jsx-syntax. For submission patterns that work without client JavaScript, see forms.