The Rules of React

This section documents React 19.x for the web, using function components and Hooks throughout (class components appear only where React still requires them, such as error boundaries). React Native is out of scope and gets only a pointer. The React 19 additions follow the current official React documentation. This content was generated with the assistance of AI and should be verified against react.dev before being relied on in production, since React APIs continue to evolve between releases.

This section’s bibliography lists the reference material consulted while preparing these pages.

React assumes your code follows a small set of rules. Break them and you get subtle bugs — stale UI, lost state, crashes — that also defeat the React Compiler and concurrent features. The Rules of React are the contract.

Components and Hooks must be pure

Idempotent — given the same props, state, and context, a component returns the same JSX every time.
No side effects in render — no network calls, no timers, no DOM mutation, no writing to external variables while rendering. Side effects go in event handlers or Effects.
Props and state are immutable — never mutate them. Create new objects/arrays and set state instead.
Do not mutate values after passing them to JSX — once you have used a value in returned JSX, treat it as frozen; mutating it afterward can produce inconsistent rendering.

function Cart({ items }) {
  items.sort((a, b) => a.price - b.price);   // BUG: mutates a prop during render
  const sorted = [...items].sort((a, b) => a.price - b.price);  // OK: a copy
  return <List items={sorted} />;
}

See Components and Hooks must be pure.

React calls your components and Hooks

Never call a component as a plain function. Render it as JSX (<Row />), not Row(). Calling it directly breaks Hook state, context, and the rules of the reconciler.
Never pass a Hook around as a value. Call Hooks directly by name at the top level of a component or custom Hook; do not store one in a variable, pass it as a prop, or call it conditionally.

function Table({ rows }) {
  return <tbody>{rows.map((r) => <Row key={r.id} row={r} />)}</tbody>;  // JSX, not Row(r)
}

See React calls Components and Hooks.

The Rules of Hooks

Call Hooks only at the top level of a React function — not in conditions, loops, or nested functions — and only from React functions (components or custom Hooks). React tracks Hooks by call order, so that order must be identical on every render. Full detail on Core Hooks and the Rules of Hooks.

Related: a component’s identity — and therefore its state — is tied to its position in the render tree. The key prop overrides position-based identity so you can force React to treat an element as new (reset its state) or preserve it across reorders. See Rules of Hooks and State Management for preserving and resetting state.