Как работает setState?

Question

[GreenMan1899]

Не могу найти такую информацию по работе setState: поля объекта state внутри setState обновляются асинхронно между собой или нет? И если вызвать изменение например одного и того же поля счетчика counter на +1 внутри одного setState, то будут ли они инкрементироваться асинхронно?

Comments

[Антон Спирин]

если вызвать изменение например одного и того же поля счетчика counter на +1 внутри одного setState

Как вы себе это представляете?

[GreenMan1899]

Антон Спирин, см картинку

[Robur]

GreenMan1899, setState принимает объект и его использует для обновления state. "все поля синхронно" в вашем понимании

Что вы там в самом объекте нагородили - к setState не имеет отношения - действие всегда одно с итоговым JS объектом который к нему попадает.

Answer 1

[Антон Спирин]

Дублирующиеся свойства в литерале объекта переопределяют друг друга. В созданный объект попадает значение последнего. Пример.

Поэтому объект, возвращаемый вызовом функции:

prevState => ({
  counter: prevState.counter + 1,
  counter: prevState.counter + 1,
})

при prevState.counter === 0, будет создаваться как:

{
  counter: 0 + 1,
  counter: 0 + 1,  // результат этого выражения попадет в созданный объект
}

и на выходе получится объект:
{ counter: 1 }
Он и будет подмешан в новый объект состояния.