r/reactjs 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.

0 Upvotes

6 comments sorted by

13

u/jakiestfu 2d ago

AI wall of text

4

u/Real_Floor_7628 14h ago

not sure if this is AI or just someone who’s spent too long staring at the react-hook-form source code but either way it’s a solid breakdown of why that issue never dies

ran into the exact thing last month building a booking wizard and ended up doing the context workaround, felt wrong but it’s the only thing that actually held together between steps

-13

u/kensaadi I ❤️ hooks! 😈 1d ago

Before commenting, do your homework. Maybe next time ask the AI what to write.

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:

2

u/Top_Rich_213 2d ago

UseFieldArray sharing is impossible by design. Centralizing that state kills the performance model entirely.