위 발표에 대한 내용을 정리한 글입니다.
Daishi Kato는 Zustand, Jotai, Valtio, React Tracked를 만드신 분입니다.
React 18로 버전을 올렸을 때 외부 Store에 의존하는 라이브러리의 경우 Tearing이 발생한다고 합니다.Tearing이란 유저가 느끼는 Visual Inconsistency입니다.
Tearing에 대해서 다루기 전에 우리는 External Store에 대해서 알아봐야합니다.Redux와 Zustand는 외부 스토어를 사용합니다. Dom Object, 전역 변수 또한 외부 스토어라고 할 수 있습니다.
이제 Tearing이라는게 Concurrent Rendering에서 어떻게 일어나는지 알아봐야합니다.
우리는 외부 스토어에 count라는 변수가 있고 A, B 컴포넌트에서 이를 사용합니다.
count는 0에서 시작해서 A가 0을 UI에 렌더링합니다.(렌더링을 쪼갬) 그러는 동안에 카운트는 1이되었고 컴포넌트 B가 렌더링됩니다. 이제 유저는 같은 변수에 대한 다른 UI를 보게 됩니다.
이는 리액트가 렌더링을 쪼갤때 A와 B에서 쪼개고 이 쪼개진 상황에서 count 변수가 바뀌었을 때 이런 상황이 일어납니다.
보통 외부 스토어는 구독 형태의 메커니즘을 제공하고, Tearing은 일시적으로만 발생합니다.
이를 방지하기 위해 React 18은 useSyncExternalStore라는 훅을 제공합니다. 이 훅은 두개의 함수를 인자로 받습니다. 첫번째 친구는 콜백 함수를 등록하는 것이고, 두번째 함수는 불변 상태를 반환하는 함수입니다.
위 코드는 useSyncExternalStore를 이해하기 위한 예제 코드입니다.