React 18 미리보기

즉시 사용 가능한 개선점

코드의 변경 없이 React 18로 업데이트하자마자 얻을 수 있는 개선점에 대해서 간단히 이해해보자.

Automatic batching for fewer renders

  제목에서도 알 수 있는 것처럼 간단히 설명하자면, React 18 이전에는 오직 이벤트 핸들러 안에서 발생한 setState만 모아서 처리 했지만, React 18 이후부터는 promise, setTimeout 등에서 발생한 연속적인 setState도 모아서 처리될 수 있도록 개선되었다는 내용이다.

  위 기능을 피하고 싶다면 react-dom의 flushSync api를 이용하면 모아서 처리하지 않고 하나의 setState가 바로 re-render를 일으키도록 명시적으로 코드를 추가할 수 있다.