Designing a multi-step wizard form pattern

WHAT THIS TESTS The interviewer is assessing orchestration design: managing flow and shared state centrally while letting each step stay an encapsulated, independently validated component, and ensuring data survives navigation.

A GOOD ANSWER COVERS Introduce a wizard controller that owns the cross-cutting state: the current step index, the navigation actions next, back, and finish, and an accumulated data object holding values from all steps, exposed through context or a hook. Each step is a distinct component responsible for its own fields and validation; it reads any previously entered values for its section from the shared store so revisiting shows prior input, and on a next attempt it runs its own validation and, only if valid, merges its values into the accumulated store and advances. This keeps steps decoupled (the wizard does not know each step's fields) while persistence is centralized so moving back and forward never loses data. The controller gates navigation on the current step's validity, computes whether next or finish should show, and on finish submits the combined data. Persisting the accumulated store to session storage guards against refresh.

COMMON WRONG ANSWERS Storing each step's values only in that step's local state, so going back unmounts it and loses the data. Centralizing all validation in the wizard, coupling it to every step. Letting steps navigate themselves without the controller gating on validity. Submitting per step instead of collecting and submitting once.

LIKELY FOLLOW-UPS How do you handle conditional or branching steps? How do you validate cross-step dependencies? How do you allow jumping to a visited step?

ONE CONCRETE EXAMPLE A checkout wizard controller holds step index and an accumulated order object. The Shipping step validates its address and on next merges it into the store; the Payment step reads nothing from shipping but adds card details; pressing back returns to Shipping with the address still filled. Finish submits the combined object once, and the store is mirrored to session storage so a refresh resumes mid-flow.