reactjs why use spread operator in setState

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

React may batch multiple setState() calls into a single update for performance.

Because this.props and this.state may be updated asynchronously, you should not rely on their values for calculating the next state.

For example, this code may fail to update the counter:

// Wrong
this.setState({
  counter: this.state.counter + this.props.increment,
});

To fix it, use a second form of setState() that accepts a function rather than an object. That function will receive the previous state as the first argument, and the props at the time the update is applied as the second argument:

// Correct
this.setState((state, props) => ({
  counter: state.counter + props.increment
}));

We used an arrow function above, but it also works with regular functions:

// Correct
this.setState(function(state, props) {
  return {
    counter: state.counter + props.increment
  };
});

Read more here on their official documentation

the 'values' parameter contains the current values held in state , so by using the spread operator you preserve the values held in the current state and add in new ones.

In the second example you are just setting the state to the event.target.name and overwriting the previously held state.

For example , suppose the app had called setValues three times with three events : event1 , event2 and event3

In the first case you wrote about your state would be { event1, event2, event3 }. in the second case your state would be { event3 }