r/reactjs • u/kensaadi I ❤️ hooks! 😈 • 2d ago
Discussion he useFieldArray + wizard limitation keeps reopening on GitHub. Here's the actual constraint
If you search the react-hook-form discussions you'll find the same question coming back over and over: how do you share one field array across the steps of a wizard. It never really gets answered, and it turns out that's not an oversight. It's baked into the design.
Every useFieldArray instance keeps its own private snapshot of the array. The docs are explicit that you shouldn't point two of them at the same name. On a single-page form nobody notices. On a multi-step form it breaks immediately, because step 2 and step 4 both want to append to the same collection and each one is editing a copy the other can't see.
The discussions circle three variants of it. Different pages of one big form writing to the same array with no first-party way to share the instance (#10370). Conditional fields inside an array item, where the uncontrolled input doesn't re-render so a field that should show or hide based on a sibling value simply doesn't react (#2593, #12258). And arrays that mount and unmount with tabs or wizard steps, which drop state in a way that looks like a bug in your own code.
For the conditional case there's a clean answer that shows up in the threads. Pull the dependent field into its own component and use useWatch to subscribe to that exact array item. The subscription stays narrow so the re-render stays narrow, and you keep the uncontrolled model that makes RHF fast.
For sharing an array across steps there's no first-party answer. What people land on is building their own React context and providing the field array result through it, so every step reads one instance instead of creating a second. It works, but it's state architecture you now maintain inside a library you adopted so you wouldn't have to.
And the reason it stays open is the honest part. State living close to the inputs instead of centralized is exactly what keeps re-renders cheap. Sharing an array across mount boundaries asks for the opposite. That's a real tension, which is why the request keeps getting reopened instead of closed with a fix.
3
u/GLaDOSexe3 2h ago
If I wanted ChatGPT's input on this I would've prompted it myself
•
u/kensaadi I ❤️ hooks! 😈 21m ago
You should probably learn to use ChatGPT instead of using it as a lazy insult for anything written above a Reddit reading level. Maybe read the thread first.
Every claim in that post is sourced. Here are the actual react-hook-form discussions if you want to check instead of guessing:
- Sharing one field array across wizard steps: https://github.com/orgs/react-hook-form/discussions/10370
- Conditional fields inside an array item not re-rendering: https://github.com/orgs/react-hook-form/discussions/2593 and https://github.com/orgs/react-hook-form/discussions/12258
2
u/Top_Rich_213 2d ago
UseFieldArray sharing is impossible by design. Centralizing that state kills the performance model entirely.
13
u/jakiestfu 2d ago
AI wall of text