useId, useSyncExternalStore, useDeferredValue — 잘 안 쓰이지만 중요한 훅들

// ❌ Math.random() — SSR 시 서버/클라이언트 불일치
function Input({ label }) {
  const id = `input-${Math.random()}`; // 매번 다른 값
  return (
    <>
      <label htmlFor={id}>{label}</label>
      <input id={id} />
    </>
  );
}

// ❌ 전역 카운터 — 렌더 순서에 의존
let counter = 0;
function Input({ label }) {
  const id = `input-${counter++}`; // 서버/클라이언트 순서가 다를 수 있음
}

// ✅ useId — SSR 안전
function Input({ label }) {
  const id = useId();
  return (
    <>
      <label htmlFor={id}>{label}</label>
      <input id={id} />
    </>
  );
}

function PasswordField() {
  const id = useId();

  return (
    <div>
      <label htmlFor={`${id}-password`}>비밀번호</label>
      <input id={`${id}-password`} type="password" aria-describedby={`${id}-hint`} />
      <p id={`${id}-hint`}>8자 이상, 특수문자 포함</p>
    </div>
  );
}

Concurrent Mode에서 렌더링 도중 외부 스토어가 변경되면:
  컴포넌트 A: 이전 값(10)을 읽음
  → 렌더링 중단 (긴급 업데이트 처리)
  → 외부 스토어 값 변경 (10 → 20)
  컴포넌트 B: 새 값(20)을 읽음
  → 같은 렌더 트리에서 다른 값이 표시됨 (tearing)

import { useSyncExternalStore } from 'react';

// 외부 스토어 예시: 브라우저 온라인 상태
function useOnlineStatus() {
  return useSyncExternalStore(
    subscribe,    // 구독 함수
    getSnapshot,  // 현재 값을 읽는 함수
    getServerSnapshot // SSR용 (선택)
  );
}

function subscribe(callback) {
  window.addEventListener('online', callback);
  window.addEventListener('offline', callback);
  return () => {
    window.removeEventListener('online', callback);
    window.removeEventListener('offline', callback);
  };
}

function getSnapshot() {
  return navigator.onLine;
}

function getServerSnapshot() {
  return true; // SSR에서는 항상 온라인으로 가정
}

// 사용
function StatusBar() {
  const isOnline = useOnlineStatus();
  return <span>{isOnline ? '🟢 온라인' : '🔴 오프라인'}</span>;
}

// Zustand가 내부적으로 하는 일 (개념적)
function useStore(selector) {
  return useSyncExternalStore(
    store.subscribe,
    () => selector(store.getState()),
    () => selector(store.getState())
  );
}

function SearchPage() {
  const [query, setQuery] = useState('');
  const deferredQuery = useDeferredValue(query);

  // query는 즉시 업데이트 (입력 필드 반응)
  // deferredQuery는 여유가 생기면 업데이트 (검색 결과 반영)
  const isStale = query !== deferredQuery;

  return (
    <div>
      <input
        value={query}
        onChange={(e) => setQuery(e.target.value)}
      />
      <div style={{ opacity: isStale ? 0.5 : 1 }}>
        <SearchResults query={deferredQuery} />
      </div>
    </div>
  );
}

// SearchResults가 무거운 렌더링을 수행하더라도 입력이 버벅이지 않음
const SearchResults = memo(function SearchResults({ query }) {
  const results = computeExpensiveResults(query);
  return <ul>{results.map(r => <li key={r.id}>{r.text}</li>)}</ul>;
});

// debounce: 항상 300ms 기다림
const debouncedQuery = useDebounce(query, 300);

// useDeferredValue: React가 여유가 있으면 즉시, 바쁘면 지연
const deferredQuery = useDeferredValue(query);

렌더링 → useInsertionEffect → DOM mutation → useLayoutEffect → 브라우저 paint → useEffect

// ⚠️ 일반 개발자가 직접 사용할 일은 거의 없음
// CSS-in-JS 라이브러리 개발자를 위한 훅

function useCSS(rule) {
  useInsertionEffect(() => {
    const style = document.createElement('style');
    style.textContent = rule;
    document.head.appendChild(style);

    return () => {
      document.head.removeChild(style);
    };
  });
}

// styled-components, emotion 등이 내부적으로 사용

// useTransition: state 업데이트를 낮은 우선순위로 표시
function TabContainer() {
  const [isPending, startTransition] = useTransition();
  const [tab, setTab] = useState('home');

  function selectTab(nextTab) {
    startTransition(() => {
      setTab(nextTab); // 이 업데이트는 낮은 우선순위
    });
  }

  return (
    <div>
      <TabButton onClick={() => selectTab('home')}>홈</TabButton>
      <TabButton onClick={() => selectTab('posts')}>글</TabButton>
      {isPending && <Spinner />}
      <TabPanel tab={tab} />
    </div>
  );
}