react 여러 setState가 서로 기다려서 멈춤(react state batch update) : setTimeout으로 각각 비동기 업데이트

에러 내용

---

react에서 서버로부터 응답을 받아 여러 setState를 Promise를 통한 비동기로 실행하는 상황입니다.

그런데 각 응답을 받자마자 state를 업데이트를 하지 않고 모든 응답을 받았을 때 state를 업데이트합니다.

즉, 가장 느린 응답을 받기 전까지는 빠른 응답을 받은 다른 state들을 업데이트를 하지 않습니다.

 

에러 원인

---

이는 react가 re-render을 효율적으로 하기 위한 특정 원칙 때문입니다.

"reconciliation"(재조정)이라고 불리는 이 원칙은 react가 최소한의 비교와 re-rendering으로 효율적으로 페이지를 업데이트하도록 해줍니다.

 

이러한 성능적인 이유 때문에 여러 setState 호출을 묶어서 한 번의 업데이트에 state를 업데이트하고 단 한 번의 re-render 만으로 페이지를 업데이트합니다. 이러한 행동을 "react state batch update"라고 부릅니다.

 

해결 방법

---

setTimeout을 사용하면 간단히 해결할 수 있습니다.

setTimeout(() => setState(new_val), 0);

 

setTimeout은 asynchronous event로서 state batch update를 할 수 없도록 하며

delay를 0으로 전달함으로 다음 이벤트 사이클에 실행하도록 합니다.

 

즉, setState가 각각 즉시 실행되어 state가 업데이트되고 re-render를 일으킵니다.

참고 자료

---

 

https://beta.reactjs.org/learn/queueing-a-series-of-state-updates#react-batches-state-updates

State and Lifecycle – React

 

React State Batch Update

 

setTimeout() - Web API | MDN