React Boundaries

Own state, data, and side effects at the lowest correct boundary. Parents compose structure; they do not become data hubs.

Principle: a component should own what it needs to render and act—unless another boundary must genuinely coordinate, gate, or load in parallel.

Hard Defaults

1. Push down. State and fetches live with the consumer. Lift only via the exception list.
2. Pass identity, not payloads. Give children an id (or stable handle); let them subscribe or query. Do not drill entities through wrappers that never use them.
3. Compose UI, don’t pipe props. Prefer children / slots / named parts over threading data, isLoading, and handlers through layout shells.
4. Shared clients, local hooks. One API or QueryClient; many leaf hooks. Do not centralize “call the API” five layers up.
5. Structure over memo theater. Fix ownership and tree shape before spraying memo / useCallback / useMemo. Prefer patterns that work with React Compiler.
6. Justify every hoist in one line when you lift or route-fetch (“SEO”, “gate before mount”, “sibling sync”, “anti-waterfall”).

When Hoisting Is Correct

Hoist state or data ownership only for: