Should I consolidate key/value pairs into a single useState hook?

Question

Which one is best practice in most cases?

For example:

const [currentDaypart, setCurrentDaypart] = useState({})
const [nextDaypart, setNextDaypart] = useState({})

or

const [daypart, setDaypart] = useState({
    current: {},
    next: {}
})

????

Answer 1

The first one is better. Generally, you should watch out for deeply nested objects in React state. To avoid unexpected behavior, the state should be updated immutably.

Once you deep clone the state, React will recalculate and re-render everything that depends on the variables, even though they haven't changed! You flatten the state first. As soon as you do that, you will find beautiful tools that will help dealing with large states, such as useReducer().