useSyncExternalStore : 실전 리액트 개발을 위한 심층 해설

Concurrent rendering은 한 렌더 패스를 중단/재개할 수 있어서, 그 사이 외부 스토어가 바뀌면 같은 트리 안에서 서로 다른 스냅샷을 읽습니다. useSyncExternalStore는 렌더 패스 동안 스냅샷을 고정(pinning) 해 이를 막습니다.

// 테어링이 날 수 있는 옛날 패턴
function useStore() {
  const [state, setState] = useState(store.getState());
  useEffect(() => store.subscribe(() => setState(store.getState())), []);
  return state; // 렌더 중단/재개 사이에 store가 바뀌면 트리 불일치
}

각 인자가 언제·어떻게 호출되는지 정확히 외워야 합니다.

React는 Object.is(prev, next)로 스냅샷을 비교합니다. 매번 새 객체 리터럴을 반환하면 항상 다르게 보여 무한 리렌더 또는 The result of getSnapshot should be cached 경고가 납니다.

// 나쁨: 매 호출마다 새 객체
const snap = useSyncExternalStore(sub, () => ({ count: store.count }));

// 좋음 1: 원시값
const count = useSyncExternalStore(sub, () => store.count);

// 좋음 2: 셀렉터 + with-selector
import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/shim/with-selector';
const count = useSyncExternalStoreWithSelector(sub, store.getState, null, s => s.count);

브라우저 전용 API(navigator.onLine, window.matchMedia)는 서버에 없습니다. getServerSnapshot을 빼거나 undefined를 던지면 Suspense가 풀리지 않거나 hydration mismatch가 납니다.

function useOnline() {
  return useSyncExternalStore(
    (cb) => {
      window.addEventListener('online', cb);
      window.addEventListener('offline', cb);
      return () => {
        window.removeEventListener('online', cb);
        window.removeEventListener('offline', cb);
      };
    },
    () => navigator.onLine,
    () => true, // 서버: 일단 online 가정
  );
}

Zustand(v4+), Redux(react-redux 8+), Jotai 등 최신 바인딩은 내부적으로 useSyncExternalStore를 씁니다. 그래서 라이브러리만 최신이면 테어링은 이미 해결되어 있고, 직접 구현할 때만 이 훅을 건드리면 됩니다.

[감점 답변] '리렌더링이 잘 된다' 수준. [좋은 답변] startTransition 등으로 렌더가 중단/재개되는 도중 스토어 변경 → 같은 트리에서 구/신 값 혼재 → UI 불일치 흐름을 짚고, useSyncExternalStore가 렌더 패스 동안 스냅샷을 고정하는 계약이라는 점, 그리고 Zustand/react-redux 최신 바인딩이 이를 내부적으로 쓴다는 연결까지.

[감점 답변] 'useMemo 쓰면 됨' 수준. [좋은 답변] React가 Object.is로 이전/현재 스냅샷을 비교하는데 매번 새 객체를 만들면 항상 다르게 보임 → 무한 리렌더. 해결책 3가지를 트레이드오프와 함께: (1) 원시값 반환, (2) useSyncExternalStoreWithSelector + 셀렉터, (3) 스토어 내부에서 참조 안정성 유지(불변 업데이트).

[감점 답변] getServerSnapshot 언급 누락. [좋은 답변] 서버엔 해당 API가 없으니 합리적 기본값(true) 을 getServerSnapshot으로 제공, 클라이언트 subscribe에서 online/offline 이벤트 바인딩, 그리고 서버-클라이언트 초기값 불일치를 인정하면서 hydration mismatch를 최소화하는 설계까지.