seop

이 스토리는, 위 문서를 읽고난 후 얻은 결론을 요약한 글이므로, 자세한 예제와 해결방법을 찾기 원하시는 분은 윗 문서에서 찾으시기 바랍니다.

React 는 기본적으로 Batching 이라는 방식으로 여러개의 setState 가 있을 시 렌더링이 한 번 되도록 최적화가 이루어집니다. 그러나 React 17 버전 이하에서는, promise, setTimeout, 네이티브 이벤트 핸들러 내부에선 Batching 이 이루어지지 않습니다. 여기의 콜백들은 브라우저의 태스크 큐에 적재되는 함수들이므로, 리액트의 관할을 벗어났다고 말할 수 있기 때문입니다.

이것이 18 버전에서는 해결이 되었습니다. createRoot 함수를 이용하여 리액트를 랜더링 하면 됩니다.

--

--