React 18에서 도입된 동시 렌더링(Concurrent Rendering)은 UI 업데이트 시 렌더링이 “중단되거나(branch), 뒤로 미뤄지거나(defer), 쪼개져(time slicing)” 여러 단계로 일어날 수 있도록 해줍니다. 그런데 이 구조가 전역 상태 관리 라이브러리와 함께 동작할 때, 이론적으로 “tearing”(상태가 일시적으로 어긋나는 현상)이 발생할 가능성이 있습니다.

소개할 레포는 Zustand, Jotai 등 유명 상태 관리 라이브러리 저자가 만든 저장소로, 여러 React 상태 관리 라이브러리들을 대상으로 다양한 상황에서 실험했을 때 동시 렌더링에서 tearing이 발생하는지 테스트 결과를 정리해둔 곳입니다.

테스트 결과, Jotai는 모든 테스트를 통과해 동시 렌더링 대응이 우수하고, Zustand는 외부 스토어 설계 특성상 일부 제한이 있지만 실무에서 감수 할만한 수준인 것 같습니다.

React Query처럼 서버 상태 관리 라이브러리도 테스트에 포함되어 있는데, 일부 케이스에서 tearing이 발생하는 점을 확인할 수 있었습니다.

자세한 내용은 저장소 링크를 확인해 주세요.

https://github.com/dai-shi/will-this-react-global-state-work-in-concurrent-rendering