React: a better useState

React: a better useState

May 9 2023

I am sure you recognize yourself using multiple usestate hooks that share some kind of relation between them. And then you add a couple of useEffect to keep the relations between those states. Now what if you could do all that with just one hook? You can.

UseReducer to the rescue. Place your state in an object and update it inside the useReducer. There you can add guard rails etc to make sure your state makes sense.

export const MyComponent = () => {
    const [event, updateEvent] = useReducer((prev, next) => {
        const newEvent = {...prev, ...next}

        /* Add your centralized logic and guard rails here */
        if(newEvent.startDate > newEvent.endDate){
            newEvent.endDate = newEvent.startDate
        }

        // ...

        return newEvent
    }, {title: '', description:'', attendees:[]})

    return (
        <h2>Update Event</h2>
        <DateComponent onClick={e => updateEvent({startDate: e.target.startdate.value, endDate: e.target.enddate.value})} />
    )
}

Now you have a place for your logic centralized where you can ensure that your data is valid.