CODEWITHSUNDEEP
javascriptreactjs
bluearth
bluearth

Reputation: 523

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

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')

?

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?

Upvotes: 6

Views: 3501

Answers (2)

Abbasihsn
Abbasihsn

Reputation: 2171

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.

Upvotes: 2

Darshna Rekha
Darshna Rekha

Reputation: 1116

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

Upvotes: 6

Related Questions