Model lifecycles explicitly.
Estimated time: about 6 minutes
The hardest state is often not “where do I store this?” but “which transitions are legal, and which values must survive?”
When booleans stop scaling
This model permits contradictions:
{ isSubmitting: true, isComplete: true, error: "Payment failed" }Prefer a discriminated state model such as idle | submitting | success | failure, or a state machine when the workflow is substantial. XState is one option for explicit machines and statecharts: XState documentation.
Four kinds of persistence
Component lifetime
State survives re-renders but resets when the component is removed or keyed differently.
Navigation lifetime
Put filters, pagination, and selected views in the URL when history and sharing matter.
Session lifetime
Use session storage or an app-level store only for explicit product requirements.
Durable lifetime
Use a backend when data must survive devices, users, or browser clearing.
Forms are usually drafts
A form value is often not authoritative server data yet. Treat it as a client draft, validate it locally, submit a mutation, and decide how conflicts or server validation errors are represented.
Interview distinction: “The saved profile is server state. The edits currently in the form are client draft state. On submit, the draft becomes a server mutation.”
Optimistic updates
An optimistic update changes the UI before the server confirms success. It can make interactions feel fast, but it requires a rollback or reconciliation plan.
Good candidate
Like/unlike, archive, reorder, or another action with a predictable inverse.
Risky candidate
Payments, destructive operations, or actions where authorization and server rules are complex.
Retrieval challenge
Where would you put each value?
- A checkout step and whether the user can move forward.
- A product filter that should be linkable.
- Unsaved text in a profile form.
- A preference that should remain after a browser restart.
- The result of saving the profile.
- Reducer or state machine for explicit workflow transitions.
- URL/search parameters.
- Form/client draft state.
- Persisted client state such as local storage, if appropriate for the product.
- Server state managed through the API/cache layer.
Interview-ready answer
“I separate the draft from the saved entity. I model the workflow states explicitly, put navigable state in the URL, and persist only what the product requires. For optimistic updates I define the inverse or reconciliation behavior before using the pattern.”
Primary reading
Review React’s preserving and resetting state and Managing State.
Next lesson: a complete senior-level interview simulation.