Core Concepts
State, props, hooks and their rules, keys, context, and effects — the vocabulary of every React codebase.
Third-party documentation. This is independently authored analysis of the public React codebase — not the official docs, and not reviewed or endorsed by the React team.
Core Concepts
Five concepts cover the working vocabulary of every React codebase.
Props and state
Props flow down from parent to child and are read-only — a component is a pure-ish function of them. State is memory owned across renders; setting it schedules a re-render. The rule "state lives at the lowest common owner that needs it" drives most architectural decisions in an app.
Hooks and their rules
Hooks (useState, useEffect, useContext, useMemo, useRef…) attach persistent behavior to function components. They work by call order: React maps each hook call to its slot per instance, which is why hooks must run unconditionally, in the same order, at the top level of a component — the famous rules of hooks are not style, they are the data structure's contract.
Keys
In lists, keys tell the reconciler which element is which across renders. A stable key preserves instance identity (and therefore state and DOM nodes) through reorderings; index-as-key quietly corrupts state when items move.
Context
Context broadcasts a value down the tree without threading props through every level. It is dependency injection, not state management: consumers re-render whenever the provider's value changes identity, so coarse contexts cause broad re-renders.
Effects
useEffect synchronizes the component with external systems (network, subscriptions, timers) after render, with cleanup functions handling teardown. The mental model is synchronization, not "lifecycle method" — effects re-run when their dependencies change, by design rather than as an optimization target.