React mental models¶

Render is a calculation¶

A component calculates elements from one snapshot of props and state. React may calculate more than once, pause, discard, or later commit that work. External side effects therefore do not belong in render.

Identity preserves state¶

React associates state with a component type at a position in the tree. Keys refine sibling identity. Changing type, position, or key can reset state.

State is a snapshot¶

Calling a setter queues future work; it does not rewrite variables captured by the current handler. Functional updates calculate from queued prior state.

Effects synchronize¶

Effects connect committed UI to external systems. Cleanup reverses setup. If no external system exists, calculate during render or act in the event handler.

Context transports values¶

Context avoids passing a value through intermediate components. It does not determine ownership, caching, persistence, or domain transitions.