Is there any differences between having ponent state bundled up as single object like this (1)

const [state, setState] = useState({ 
  title: 'Jerome Is Coming!', 
  year: '1998'
})

versus having separate state with primitive values to track each ponent state, like this (2)

const [title, setTitle] = useState('Jerome Is Coming!')
const [year, setYear] = useState('1998')

?

Edit: I do aware of the suggested usage pattern. To add to this question what I want to know is is there any difference in terms of runtime performance by doing it one way instead of the other especialy if my state object is huge.

Will updating just one member state cost the same as updating the entire state object? If not the same, is the difference significant?

Is there any differences between having ponent state bundled up as single object like this (1)

const [state, setState] = useState({ 
  title: 'Jerome Is Coming!', 
  year: '1998'
})

versus having separate state with primitive values to track each ponent state, like this (2)

const [title, setTitle] = useState('Jerome Is Coming!')
const [year, setYear] = useState('1998')

?

Edit: I do aware of the suggested usage pattern. To add to this question what I want to know is is there any difference in terms of runtime performance by doing it one way instead of the other especialy if my state object is huge.

Will updating just one member state cost the same as updating the entire state object? If not the same, is the difference significant?

• javascript
• reactjs

2 Answers 2

As per official React documentation, we should club the state variables (object) when the values tend to change together.

However, we remend to split state into multiple state variables based on which values tend to change together.

More details here: Should I use one or many state variables?

References:

Tip: Using Multiple State Variables

Actually, based on state concept there is no difference between them and only their data is different. As a result, your interaction with the state would be different based on the provided object. For example, if you have only one parameter in your state, like:

const [title, setTitle] = useState('Jerome Is Coming!')

when you update its value as follow:

setTitle("test");

it will replace the previous title with the next one. In contrast, the you have provided an object like below:

const [state, setState] = useState({ 
  title: 'Jerome Is Coming!', 
  year: '1998'
})

you can update only one of them and keep the remained as same as the previous state as follow:

setState({...state, year: '2010'});

this only will affect year parameter and title would remain the same. Personally, I prefer to use object instead of primitive parameters, because you can set them simultaneously whenever you need.