In React, is the difference between simple value state vs object state-CodePudding

Is there any differences between having component 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 component state, like this (2)

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

CodePudding user response：

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

However, we recommend 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

CodePudding user response：

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.