First, to follow this guide, you should have knowledge of React and useState hook, and specially 



Now, try to imagine this with an asynchronous function in the middle with no idea when it will be resolve... (props.onChange) :

- Change the sub-value of a field, then trigger the onChange
- Change another sub-value of the same field before saving is done

Let's find a elegant way to solve this issue, and create a model we can use in many of our custom components


There is three main goals here : 
- Managing complex state without redux or zustand library
- Use a state instead of the value received by Sanity core
- Get control over when the modifications are saved

PS : you can do it with useState (one or severals), but it is more difficult, less performant (because of the useCallback that will depend on variables) and very hard to maintain.

You can of course split the code into several modules.

The component is a simple time slot with start time and end time.
The state associated is not a very complex one but is enough to understand the logic.

Let's begin with the component and the template

You will need : 
- Static data for hours and minutes
- A react component rendering 4 selects
- The 


Now we can handle the change with the same function for all four selects : 

The data is composed of two fields with two sub fields each that define the schema and state


Next, we need to define the actions ! If you ever worked with Redux, it is very much the same structure.

And voila. You can enjoy that : 

- The state is simple to read, maintain and follow your Sanity Schema (you can put your entire schema in it)
- Your JSX depend on the state and not the value (update is instant)
- You have only one place in your code to call the Sanity save function with complete control over the passed data

and a bonus : 
- The update functions use React useCallback optimization and are declared only once (vs need updates if you choose useState)

If you want to go further, you can optimize your component :
- Use a derived state in the reducer (because normaly state is read only)
- Pass a function as the intialization of useReducer to avoid recalculations.

nuagedelait.

nuagedelait.

Engineer Manager / Creative React Developper

Handling complex state in a Sanity custom component