Best practice to structure Zustand store for dynamic forms?

[lkdm]

I am working on an application that will dynamically render large forms from an object. This includes conditional sections of the form.

What is the best way to structure a Zustand store so that;

1. Only the input field is re-rendered if something changes (usually a red outline to show an error, with text underneath).
2. The state of certain parts of store are available throughout the form (for conditional stuff).

My assumption is that the Zustand store should be created on the module level of the Form component, with an array of objects that store user input and optional validation error message from each form field. Maybe this is made available by passing the Zustand store as a prop, or as a Provider?

Problem is that when I gave this a go on my dev application, setting the error message underneath the relevant input re-rendered the entire form. This will be a problem with 30+ inputs.

It this because I'm setting Zustand state from within the Form component, but I should be doing it from within the Input component?

[dai-shi]

If you would like to use Zustand store with Context, zustand/context may help.

[lkdm]

Thank you @dai-shi.

---

For anyone who wants to know how to implement this, you can use a provider with a function that returns a Zustand useStore function.

 <Provider createStore={createStore}> 
                <ChildComponent
                    name="formInput1"
                    label="Put some text in here"
                    required
                    />
</Provider>

You can then use a selector to use a portion of that state with the ChildComponent.

  const state = useStore(useCallback(state => state[props.name], [props.name]))

Then just make an attribute in your Zustand store called formInput1.