If I had a functional component which required use and manipulation of multiple state items, and I had multiple states going for different things that arent directly related (such as game statistics and UI element states) would it be better performance (or practice) wise to do it like this:
const [state, setState] = React.useState({
username: 'JoeSchmoe200',
points: 200,
isHoveringOverItem: {item1: false, item2: false, item3: false},
selectedItem: {item1: true, item2: false, item3: false}
})
(where everything held in state is in one object and set with one method), or like this:
const [username, setUsername] = React.useState('JoeSchmoe200')
const [points, setPoints] = React.useState(200)
const [isHoveringOverItem, setIsHoveringOverItem] = React.useState(
{item1: false, item2: false, item3: false}
)
const [selectedItem, setSelectedItem] = React.useState(
{item1: true, item2: false, item3: false}
)
where each state is declared individually and set individually. I'm just trying to spark a conversation here to learn more about React.
What do you think about this performance-wise? Readability-wise? Is it a matter of preference or is there an objective best practice?
Prior to React 18, it was recommended to group state variables that were expected to change together. React used to batch state updates but only those directly within React events such as onClick, onChange, etc. and lifecycle methods such as useEffect. Multiple state updates within async methods e.g. fetch() weren't batched.
However with React 18, all state updates occurring together are automatically batched into a single render. This means it is okay to split the state into as many separate variables as you like.
Source: https://reactjs.org/blog/2022/03/29/react-v18.html#new-feature-automatic-batching
Still, it is a good practice IMO to keep related pieces together for better code readability. But state objects should be kept at a manageable size otherwise useReducer() should be used.