[React] setState(비동기-batch update) vs prevState(Queue)

문제 발생

1. setState를 사용하여, number state에 1~3를 이어서 더하는 동작을 구현했다.
2. 그러나, 최종 number stat는 6이 아닌, 3이 적용되었다.

const [ number, setNumber ] = useState(0);

const handleClick = (i) {
	setNumber(number + 1);
  	setNumber(number + 2);
 	setNumber(number + 3);
  
  	console.log("numberState: ", number)
}

문제 원인

setState는 비동기적 처리과정을 따르기 때문이다.
상태 업데이트는 비동기식일 수 있습니다. React는 setState()성능을 위해 여러 호출을 단일 업데이트로 일괄 처리할 수 있습니다 .
https://ko.reactjs.org/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous

state의 값이 변경되는 시점은,
setState가 호출되는 시점이 아닌, 해당 코드가 포함된 함수가 모두 실행된 이후 변경된다.

왜, state는 즉각 변경되지 않는가?

React에서 리렌더링되는 시점은,
state 변경이 대표적인 사례이다.
그렇다면, state가 변경될 때마다 리렌더링 된다면, 매우 비효율적인 성능을 가지게 된다.
이를 해결하기 위해, 나온 것이 React batch updating 이다.

React batch update

Batching이란, react가 더 나은 성능 개선을 위해, 여러개의 state 업데이트를 한번의 리렌더링으로 묶어서 진행하는 것을 말한다.
https://github.com/reactwg/react-18/discussions/21

문제 해결: prevState

원래 의도대로, setState를 모두 수행하고 싶다면, Queue를 이용하면 된다!

setState에 함수를 인자로 전달하는 방법을 사용할 수 있다.
이때, 인자로 전달된 함수는 이전 state 값을 전달 받게 된다.
이후 해당 함수들은 Queue에 저장 되어 순서대로 실행된다.
그 결과, Queue에 저장된 함수들이 동기적으로 작동되면서, 모든 setState 구문이 동작하게 된다.