State Optimization

If you set state to the exact value it already is set to, React will not bother triggering a re-render of your components because it knows nothing has changed.

const [count, setCount] = useState(0)

// ...
setCount(0) // <-- will not trigger a rerender if the state is still 0

With objects, this is a little more tricky because you need to make certain you return the exact same object:

const [state, setState] = useState({ count: 0 })

// ...
setState({ count: 0 }) // <-- will trigger a rerender
setState((previousState) => ({
	count: previousState.count,
})) // <-- will trigger a rerender
setState((previousState) => previousState) // <-- will not trigger a rerender

So, with a little forethought, you can optimize your state updates by determining yourself whether state has changed and returning the original state if it has not. This applies both in a reducer for useReducer as well as the callback for useState.