The rendering mental model

Treat components as pure snapshots: React calls them, compares the returned tree, then commits the minimum DOM work. Learn identity, render versus commit, Strict Mode, and why mutation creates stale interfaces.

Production reasoning

React 19 rewards explicit ownership and pure rendering. Start by naming the source of truth, the event that changes it, and the boundary responsible for asynchronous work. Keep derived values in render unless calculation is demonstrably expensive. When an external system is involved, make setup and cleanup symmetrical and design for interruption, retries, and stale results.

TypeScript-first workflow

Use narrow types to encode valid states rather than patching invalid combinations at runtime. Prefer discriminated unions for variants, readonly inputs for transformation helpers, and exhaustive checks for state machines. Types strengthen a sound React model; they cannot repair unclear ownership or hidden mutation.

Applied practice

Trace a render from changed props to committed output and identify accidental side effects. Review the result for semantics, keyboard use, pending and error feedback, stable identity, and testability. Measure observable behavior before introducing memoization or another abstraction.

Common failure modes

• Storing values that can be derived from current props or state.
• Mutating an object and expecting React to detect intent.
• Hiding synchronization inside a custom hook without a cleanup contract.
• Testing component internals instead of user-visible outcomes.

Takeaway

Explain not only which API you chose, but why its ownership and lifecycle match the problem.