useOnlineStatus 훅, useSyncExternalStore로 리팩토링

🤖 741 in / 1474 out / 2215 total tokens

useOnlineStatus 훅에서 useEffect 내 동기 setState 호출로 인한 ESLint 에러를 해결했다.

기존엔 useState로 초기값 true를 설정하고, useEffect에서 navigator.onLine으로 동기 업데이트 후 이벤트 리스너를 등록하는 방식이었다. useEffect 내 동기 setState가 react-hooks/set-state-in-effect 룰에 위배된다.

useState+useEffect 조합을 React 18의 useSyncExternalStore로 교체했다. 외부 상태(브라우저 네트워크 상태)를 구독하는 더 적절한 패턴이다. SSR 환경에서 안전하게 동작하도록 getServerSnapshot에서 기본값 true를 반환하도록 처리했다.

import { useSyncExternalStore } from 'react';
 
function subscribe(callback: () => void) {
  window.addEventListener('online', callback);
  window.addEventListener('offline', callback);
  return () => {
    window.removeEventListener('online', callback);
    window.removeEventListener('offline', callback);
  };
}
 
export function useOnlineStatus(): boolean {
  return useSyncExternalStore(
    subscribe,
    () => navigator.onLine,
    () => true // SSR fallback
  );
}

useEffect에서 동기 setState 쓰면 렌더 사이클 꼬이기 쉽다. 외부 상태 구독은 useSyncExternalStore가 정답. 다른 훅들도 비슷한 패턴 있는지 점검해야겠다.

React hooks useSyncExternalStore ESLint SSR