React State and Rendering Boundaries

Own component state by entity, derive render data, schedule slow updates, and keep hydration stable.

React behavior follows ownership and timing boundaries. This track covers the lifetime of a case draft, source state versus derived display, urgent typing versus expensive results, and the first render shared by server and browser. Each lesson traces a production failure and asks what must remain stable when data, route, or user input changes.

Topics in this track

React Component Identity and Keyed Draft Lifetime — Choose stable component keys according to the lifetime of a user's draft, not list position.
React Derived State and Event Ownership — Calculate render data from current inputs and put user-command effects in their event path.
React Urgent Input and Transition Work — Keep the input controlled with an urgent update while allowing an expensive result view to lag safely.
React Hydration and Stable First Render — Make server markup and the first client render agree before using browser-only data.