React 18에서 성능을 개선할 수 있는 방법을 정리한 Vercel의 글입니다.
* 성능을 개선하기 전에 먼저 성능을 측정해야 하는데 여기서 중요한 매트릭은 TBT(Total Blocking Time)과 INP(Interaction to Next Pain) 입니다. 브라우저는 싱글스레드로 동작하기 때문에 메인스레드에서 작업이 길어지면 다른 작업을 할 수 없기 때문에 TBT는 성능에 영향을 주는 50ms 이상 걸리는 작업을 긴 작업으로 간주합니다.
* React는 Virtual DOM을 준비하는 렌더린 단계와 준비한 Virtual DOM을 적용하는 커밋 단계로 나누어서 처리합니다.
* 전통적인 동기식 렌더링에서는 모든 엘리먼트에 같은 우선순위를 주어 중단없이 한번에 처리하기 때문에 다른 작업을 블라킹하게 됩니다.
* React 18에서는 Concurrent React가 도입되어 useTransitiong 훅과 startTransition을 사용하면 긴급하지 않은 렌더링을 지정할 수 있게 되었고 5ms마다 메인 스레드에 작업을 양보하기 때문에 다른 중요한 작업을 같이 처리하면서 백그라운드에서 동시에 여러 컴포넌트 트리를 렌더링할 수 있습니다.
* RSC(React Server Componetn)는 직렬화한 컴포넌트 트리를 클라이언트에 전송할 수 있기 때문에 JavaScript 번들을 같이 보내지 않고도 클라이언트에서 컴포넌트 트리를 재구성할 수 있습니다. 그래서 하이드레이션 비용을 아낄 수 있습니다.
* Suspense를 사용하면 특정 조건이 달정될 때까지 렌더링은 지연시킬 수 있고 사용자 상호작용에 따라 컴포넌틑 우선순위를 재조정할 수 있어서 가져와야할 데이터가 많은 경우 사용자에게 훨씬 원활한 경험을 제공할 수 있습니다.
* React 18에는 래핑된 함수 결과를 기억하는 cache 함수가 있어서 매번 새로 호출할 필요없이 저장된 값을 재사용할 수 있으므로 성능을 개선할 수 있습니다.
https://vercel.com/blog/how-react-18-improves-application-performance