Both works in that case, but you don't need to use that. Just setting the state will be okay:

this.setState({active: false})

But let me explain what if you have nested level of states like:

state = {
  foo: {
   a: 1,
   b: 2,
   c: 3
  }
}

And when you need to update the foo's c state only, then you'll need to merge the state like:

this.setState({ foo: {
  ...this.state.foo,
  c: 'updated value'
}})

So, the spread syntax merges object with later object. It's similar to Object.assign.

The problem occurs when you call setError multiple times from validateSubmit. Only the last value will win - in your example that's the one that added "false": true (because errors.message that you used as a property name is false).

Notice that setError does not (synchronously, or at all) update the error constant, it only changes the component state and causes it to re-render with a new value. The {...errror, …} always did refer to the original value of error. To avoid this, you can

• either aggregate the errors into a single value before calling setError once

  function validateSubmit(e) {
    let newError = error;
    if (!values.name) {
      newError = { ...newError, name: true };
    }
    if (!values.email) {
      newError = { ...newError, email: true };
    }
    if (!values.message) {
      newError = { ...newError, message: true };
    }
    console.log(error, newError);
    setError(newError);
    return newError != error;
  }
  

• or use the callback version of setError that will execute the updates in a row and always pass the latest state in each callback as an argument:

  function validateSubmit(e) {
    let response = true;
    if (!values.name) {
      setError(oldError => ({ ...oldError, name: true }));
      response = false;
    }
    if (!values.email) {
      setError(oldError => ({ ...oldError, email: true }));
      response = false;
    }
    if (!values.message) {
      setError(oldError => ({ ...oldError, message: true }));
      response = false;
    }
    console.log(error);
    return response;
  }
  

As per the documentation:

Never mutate this.state directly, as calling setState() afterwards may replace the mutation you made. Treat this.state as if it were immutable.

• reactjs.org/docs/react-component.html#state

So, in the example from the tutorial you've mentioned, you wouldn't need to make a copy of the array to update your state.

// GOOD
delTodo = id => {
  this.setState({
    todos: this.state.todos.filter(...)
  })
}

Array.filter method creates a new array and does not mutate the original array, therefore it won't directly mutate your state. Same thing applies to methods such as Array.map or Array.concat.

If your state is an array and you're applying methods that are mutable, you should copy your array.

See more to figure out which Array methods are mutable:

• doesitmutate.xyz

However, if you were to do something like the following:

// BAD
delTodo = id => {
  const todos = this.state.todos
  todos.splice(id, 1)
  this.setState({ todos: todos })
}

Then you'd be mutating your state directly, because Array.splice changes the content of an existing array, rather than returning a new array after deleting the specific item. Therefore, you should copy your array with the spread operator.

// GOOD
delTodo = id => {
  const todos = [...this.state.todos]
  todos.splice(id, 1)
  this.setState({ todos: todos })
}

Similarly with objects, you should apply the same technique.

// BAD
updateFoo = () => {
  const foo = this.state.foo // `foo` is an object {}
  foo.bar = "HelloWorld"
  this.setState({ foo: foo })
}

The above directly mutates your state, so you should make a copy and then update your state.

// GOOD
updateFoo = () => {
  const foo = {...this.state.foo} // `foo` is an object {}
  foo.bar = "HelloWorld"
  this.setState({ foo: foo })
}

Hope this helps.