Why useFieldArray Breaks in Multi-Step Forms and How to Fix It
React Hook Form's useFieldArray is designed so that each instance maintains its own private snapshot of an array, meaning two instances pointed at the same field name cannot share or observe each other's data. This architectural choice prioritizes performance by keeping state close to inputs and avoiding centralized re-renders, but it creates a practical problem in wizard-style multi-step forms. When different steps try to append to the same field array, they operate on isolated snapshots, causing data to appear lost or out of sync. For conditional nested fields, the recommended workaround is to use useWatch scoped to a small component, limiting re-renders to only the affected element. For the wizard case, the community-adopted solution is to instantiate useFieldArray once and share that single instance across steps via React context, ensuring all steps read from the same source.
This is an AI-generated summary. ShortSingh links to the original source for the complete article.
Discussion (0)
Log in to join the discussion and vote.
Log in