What to consider in integrating react-hook-form with zustand.

[ahmadxgani]

When I embarked on the development of my app, I initially prioritized simplicity over architectural design. However, as my app grew more complex and I aimed to implement validation using the powerful react-hook-form library, I found myself grappling with the challenge of integrating it seamlessly.

Given that react-hook-forms already handles form data for me, and all my form data currently relies on zustand, I'm in need of guidance on the best approach to integrate the two.

At present, I utilize a slice similar to the following code snippet to manage form data:

export const createDataFormSlice = (set) => ({
  dataForm: {},
  updatePrimitive: (key, value) => set(state => ({
    dataForm: {
      ...state.dataForm,
      [key]: value
    }
  })),
  resetDataForm: () => set({ dataForm: {} })
})

For each input field, I attach an event listener like onChange, which updates the dataForm accordingly.

I am beginning to question whether my usage of zustand has been flawed all along, perhaps due to my limited knowledge and hasty decision-making.

I would be immensely grateful for any guidance, suggestions, or insights you can offer.

[ahmadxgani]

I think this question is pointless
I will try to improve my question
I apologize for the useless question

[dbritto-dev]

@ahmadxgani I would leave RHF as is. Having to sync that data with zustand and viceversa is not a good idea.

[vorant94]

@ahmadxgani why do you think it is pointless?

[vorant94]

@dbritto-dev why do you think its not a good idea? if one decide to go full on redux pattern than everything should be put to state. and there are already adapters for such matter for routing libraries, for example. why syncing forms with store would be different from syncing URL?

[dbritto-dev]

@vorant94 imho is not a good idea to put everything in a state when is not needed, everything depends in the way you are using the data and some tools/libraries/packages were created to solved specific problems. The issue that I saw frequently is that people think everything should be in a state.

Let's say you separate your global state in app state, local state (route/component state) and server state then you don't need to sync server state with local state of app state you only need the server state as source of truth and re render the form whenever you need you don't even need to use setValue from RHF to do that, a new server state should trigger a new render and you should use that to set the default values in your form through RHF

[dbritto-dev]

A good ref: https://www.youtube.com/watch?app=desktop&v=seU46c6Jz7E&t=1036s

[giacomocerquone]

So, this is actually a good question and I'm sorry no one picked it up properly.
Also, it's a bit of an old question.

In the old days when redux was overused and the only real option, there were other popular libraries to handle forms such as formik and redux-form and the first was more popular of the latter exactly because of the issue dbritto is talking about (see here https://formik.org/docs/overview#why-not-redux-form).

@dbritto-dev is the correct answer but it might be too simplistic and not really pragmatic related to certain organizations we're required to work in.

Given that your best choice is to store the data collected in each step of the wizard in the server, and then hydrate the form when you visit each step by calling something like form.reset, we have to acknowledge that this might not be always possible for whatever reason (backend devs too busy to implement the intermediate calls, company not willing to pollute db until the wizard is completed and any other reason that is technically solvable but maybe outside of your impact area).

Exactly because of this, a similar solution to the one you're talking about was proposed here: /~https://github.com/orgs/react-hook-form/discussions/6382.

So what to do if you have a wizard of, let's say, 3 steps and all the data gathered in each page must be committed to the server at the end of the flow and you also have to hydrate the form once you visit the steps after a user committed the data to the server already?

I have a few tips:

1. Query your server in each page
2. Get the results and push the data related to the form inside zustand and inside rhf (This may vary a bit depending on how you're querying in your project but every major library allows to do this easily enough).
   To push the data to rhf, it's even better if you can avoid using form.reset and leverage defaultValues instead (mainly because it is exactly what it is meant for and it's much harder to mess things up compared to calling form.reset in a custom useEffect or something along those lines).
   On this one you have to be careful though, since when you mount the form the defaultValues need to be ready, otherwise rhf won't update the form in the following rerenders if defaultValues changes.
3. Make sure to push the new values into zustand each time the user press the button to go to the next step and not at each field change like you were showing in the original post. This might prevent some performance issues and messes up less with the internal react-hook-form state.

NB:

Keep in mind that rhf isn't really meant to be used like this mainly because uses uncontrolled components where instead this situation requires components to be controlled from an outside store. This is also the reason why you don't want to change an external store like zustand each time that there is an onChange event on one of your fields.

Still, I think the above solution is an acceptable tradeoff and using rhf is, imho, the preferable solution, but it might not be for everyone!