Kolejność aktualizowania state'u

Zakładając, że w jednym komponencie mam kilka stanów i aktualizuje je wszystkie w jednej funkcji używając funkcji setState:

const [color, setColor] = useState("");
const [car, setCar] = useState("");
const [price, setPrice] = useState(0)

const updateSomething () => {
  setColor("red");
  setCar("Audi")
  setPrice(100);
}

Czy w takim przypadku najpierw wykona się aktualizacja stanu dla koloru, później dla samochodu i na końcu dla ceny? Czy w takim przypadku stany te będą aktualizowane od góry do dołu?

Jeżeli używasz wersji od 18.0.0, to obczaj to:
https://github.com/facebook/react/blob/main/CHANGELOG.md#react-1
gdzie wprowadzili batching zmian.

oraz tutaj jest to szerzej opisane:
https://github.com/reactwg/react-18/discussions/21

Zostaną zmienione wszystkie naraz, jeżeli zmiany stanu zostaną wykonane synchronicznie. Więc tylko jeden dodatkowy render się wykona. Najprościej to zwyczajnie sobie to sprawdzić :)

https://codesandbox.io/s/delicate-frost-j44e7b

tutaj w code sandboxie wykonują się dwa rendery, obstawiam, że tam jakieś wrappery codesandboxa są wyżej i one powodują zbędny render.

dzek69 napisał(a):

Zostaną zmienione wszystkie naraz, jeżeli zmiany stanu zostaną wykonane synchronicznie. Więc tylko jeden dodatkowy render się wykona. Najprościej to zwyczajnie sobie to sprawdzić :)

https://codesandbox.io/s/delicate-frost-j44e7b

tutaj w code sandboxie wykonują się dwa rendery, obstawiam, że tam jakieś wrappery codesandboxa są wyżej i one powodują zbędny render.

W takim razie kiedy by nie zostały wykonane wszystkie na raz? Jakbym np. mial użycie dodatkowo jakiegoś setState'a w useEffecie ?

useEffect decyduje czy się wykonać po jakims renderze, więc jeżeli jakiś element stanu byłby w zależnościach i dopiero potem kolejna zmiana stanu to tak, wtedy na pewno byłyby dodatkowe rendery

ale jeżeli mówimy tylko o wnętrzu updateSomething to zwyczajne:

setColor("red");
setTimeout(() => { setCar("Audi"); });

też sprawi, że mamy już dwa rendery, bo po prostu zmiany stanu nie wykonują się w tym samym wykonaniu event loopa