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.

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.

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.

Many ways to do it, really. Here's one:

this.setState(prevState => (
  {appointmentsData: {...prevState.appointmentsData}, newAppt}
));

Though your approach should work too, if you just add the appointmentsData: first. Like so:

this.setState({appointmentsData: {...this.state.appointmentsData, ...newAppt}});

This will spread all the previous values into a new object, plus the one you want to add.

I personally always use the functional way of setting the state when the new one depends on a previous state value, but your way is fine here too.

state is an object so updating it the way you are at the moment won't work.

You can simply update only the property you need as:

this.setState({
  metawords: evt.target.value,
})

Since you've mentioned spread operator, you can also (but not always necessary) update your state as:

this.setState({
  ...this.state,
  metawords: evt.target.value,
})

or

this.setState(prevState => ({
  ...prevState,
  metawords: evt.target.value,
}))

Should you need more info about it, I recommend you to have a look at ReactJS documentation.

Based upon the name setValues I assume you are referring to functional component state. (useState hook updates don't work quite the same as class-based component's setState lifecycle function)

Using the spread syntax allows for maintaining existing state, i.e. the new update [event.target.name]: event.target.value is merged into current state.

Given state { 'foo': 'bar' }

setValues(values => ({
   ...values, ['bizz']: 'buzz'
}))

New state { 'foo': 'bar', 'bizz': 'buzz' }

Without spreading in the previous state you are simply overwriting it with just an object {[event.target.name]: event.target.value}, so all previous state is lost.

Given state { 'foo': 'bar' }

setValues({
  ['bizz']: 'buzz'
})

New state { 'bizz': 'buzz' }

There are actually a couple things going on here. First is the spread syntax, the other is what is called a functional update. Functional updates allow the update to access the current state and make changes. This is a necessity when the next state depends on the previous state, like incrementing counters, and multiple state updates can be queued up during each render cycle.

setCount(count => count +1)

In the case of a form component where each property is an independent piece of state, then the following syntax is ok since each update to a field overwrites the current value:

setValues({
  ...values,
  [fieldName]: fieldValue
})

Excess property check only triggered when you try to assign an object literal. For other cases TypeScript only checks if the shape of object matches with the requested type. The reasoning is that it is most likely a developer error when you pass a wrong shaped object inlined. What could be the benefit to allow that? So it is a typo or you want something else.

But if you pass a variable, it only has to check if shape is ok, there can't be really any runtime issue. You can do, for example, the following:

 const [parts, setParts] = useState<parts>({
        general: false,
        source: false,
        target: false,
        wrongKey: "Typescript reports problem"
    } as parts)

That way TypeScript will make sure you pass 'something' which can be shaped as parts. Don't know if it is useful, tho, consider it just as an example:)

I'm not sure if this is really an issue that you are not aware about passing an extraneous property. I would like to stress if you forgot to pass a property to satisfy the shape of the required type, TypeScript will tells you that, and that is what important.

If you really want to deny extra properties, please check this answer: Is it possible to restrict TypeScript object to contain only properties defined by its class?

UPDATE 1: Why excess property check is not triggered, as actually we return with an object literal and I said excess property check run in those case, this is kinda a contradiction, but not, actually.

Consider this example:

type Parts = {
general: boolean;
source: boolean;
target: boolean;
}

type FunctionType = (parts: Parts) => Parts;

function ShowsError(parts: Parts): Parts {
 return {
   ...parts,
   someExtraPropertyWhichTriggerError:'Ooops'
 }
}

const myArrowFunction = (parts: Parts) => ({
  ...parts,
  someExtraPropertyWithoutError:'Why no report?:('
});


const DoesntShowError: FunctionType = myArrowFunction;

So what is happening there? Looks like two identical function, one is arrow, one is normal, why there is no error in case of arrow function? Same arguments, same return type, same object returned.

The key difference is, when we define our arrow function its return statement NOT contextually binded to Parts. TypeScript can't know where it is going to be used. So its generate a shape for its return type, and go on. Then we assign it to DoesntShowError which requires us assign a function with a given type. And the arrowfunction satisfy that requirement. Thats all, I think, hope it helps.