이전 버전까지의 동기 렌더링 방식에서는 컴포넌트 트리 내의 모든 컴포넌트가 렌더링되고 DOM에 반영되기까지 반응이 없는 UI를 경험했다.
리액트 18 버전에서 도입된 동시성 기능으로 렌더링 과정을 일시 중지했다가 다시 시작하거나 아예 중단할 수 있게 되었다. 이로 인해 대규모 렌더링 작업이 진행되고 있더라도 사용자 입력에 대해 UI가 즉각적으로 반응할 수 있게 된다.
각 컴포넌트에 렌더링 우선순위를 부여해 낮은 우선순위의 컴포넌트가 렌더링되는 동안에는 더 중요한 작업이 있는지 확인해 중간에 렌더링을 일시 중단하고 다른 작업을 수행한 뒤 재개할 수 있다.
자동 배칭(automatic batching)
배칭이란 여러 개의 상태 업데이트를 하나의 재렌더링으로 그룹화해 처리하는 것이다.
리액트 버전 17에서는 이벤트 핸들러 내에서만 배칭이 이뤄졌다. 18버전부터는 모든 업데이트에 대해서 자동 배칭이 이뤄진다.
급한 업데이트와 그렇지 않은 업데이트를 구별하기 위해 transition이라는 개념이 새로 도입되었다. 타이핑, 클릭 등 사용자의 직접적 상호작용은 급한 업데이트에 해당한다. startTransition으로 래핑된 업데이트는 급하지 않은 업데이트로 처리되고 더 급한 업데이트가 발생하면 중단된다.
SSR 성능 개선
HTML 스트리밍으로 로딩이 먼저 완료되는 HTML을 화면에 먼저 표시하고 로딩이 늦는 컴포넌트의 HTML은 나중에 별도로 삽입할 수 있다.
선택적 hydration으로 사용자가 먼저 상호작용하고자 하는 컴포넌트의 hydration을 우선적으로 수행할 수 있다.
suspense
experimental 기능이었던 suspense가 정식 기능이 되었다.
기존에 코드스플리팅을 위해 suspense를 사용하는 것에 더해 18버전에서는 Relay, Next.js, Hydrogen, Remix 같은 프레임워크에서 데이터를 가져올 때도 suspense를 사용할 수 있다.