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 the 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 the need 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