Do I need to use the spread operator when using useState hook on object when updating?

Question

I just started learning about hooks, and according to the official docs on Using Multiple State Variables, we find the following line:

However, unlike this.setState in a class, updating a state variable always replaces it instead of merging it.

So, if I understand correctly, this mean I don't need to use the spread operator for updating the state?

Answer 1

You still don't want to mutate state. So if your state is an object, you'll want to create a new object and set with that. This may involve spreading the old state. For example:

const [person, setPerson] = useState({ name: 'alice', age: 30 });

const onClick = () => {
  // Do this:
  setPerson(prevPerson => {
    return { 
      ...prevPerson, 
      age: prevPerson.age + 1 
    }
  })
  // Not this:
  //setPerson(prevPerson => {
  //  prevPerson.age++;
  //  return prevPerson;
  //});
}

That said, using hooks you often no longer need your state to be an object, and can instead use useState multiple times. If you're not using objects or arrays, then copying is not needed, so spreading is also not needed.

const [name, setName] = useState('alice');
const [age, setAge] = useState(30);

const onClick = () => {
  setAge(prevAge => prevAge + 1);
}

Answer 2

What it means is that if you define a state variable like this:

const [myThings, changeMyThings] = useState({cats: 'yes', strings: 'yellow', pizza: true })

Then you do something like changeMyThings({ cats: 'no' }), the resulting state object will just be { cats: 'no' }. The new value is not merged into the old one, it is just replaced. If you want to maintain the whole state object, you would want to use the spread operator:

changeMyThings({ ...myThings, cats: 'no' })

This would give you your original state object and only update the one thing you changed.