리액트는 이미 변했습니다. 훅 역시 변해야 합니다.

effect 의 정의는 '외부 세계와 React 트리를 동기화'. 파생 값 계산은 렌더 단계 책임이다.

// ❌ effect 로 파생 상태
useEffect(() => {
  setFiltered(data.filter(d => d.includes(query)));
}, [data, query]);

// ✅ 렌더 단계에서 계산
const filtered = useMemo(
  () => data.filter(d => d.includes(query)),
  [data, query]
);

effect 로 파생을 만들면 렌더 → setState → 또 렌더 두 번 그리는 비용이 매번 발생한다.

matchMedia, Redux/Zustand, 스크롤 위치처럼 동기 일관성 이 필요한 구독은 useState + useEffect 로 만들면 동시성 렌더 중 tearing(렌더 도중 값이 바뀌어 화면이 부분적으로 어긋남) 이 발생한다.

function useMediaQuery(query) {
  return useSyncExternalStore(
    (cb) => {
      const mql = window.matchMedia(query);
      mql.addEventListener('change', cb);
      return () => mql.removeEventListener('change', cb);
    },
    () => window.matchMedia(query).matches,
    () => false // SSR 초기값
  );
}

세 번째 인자(SSR snapshot) 를 넘겨야 hydration mismatch 가 사라진다.

RSC 환경에서는 서버 컴포넌트에서 await 로 직접 패칭하고, 클라이언트에선 use(promise) 로 Suspense 와 함께 처리하는 것이 표준이 됐다.

// 서버 컴포넌트
async function UserCard({ id }) {
  const user = await fetchUser(id);
  return <Card>{user.name}</Card>;
}

// 클라이언트 컴포넌트
function UserCardClient({ promise }) {
  const user = use(promise); // Suspense 와 결합
  return <Card>{user.name}</Card>;
}

useEffect 패칭과 비교해 워터폴 제거 + 번들 축소 + Suspense 통합 을 한 번에 얻는다.

[감점 답변] 'effect 안에서 최신 값을 읽기 위한 것' 한 줄. [좋은 답변] useEffectEvent 는 effect 내부 호출 에 최적화된 도구로, 의존성 배열에 포함되지 않으면서 최신 props/state 를 읽게 해준다. 하지만 effect 자체가 언제 다시 실행될지 를 결정하는 의존성에서 빠지면 동기화가 깨진다 — 예컨대 roomId 가 바뀌었는데 reconnect 가 안 된다. 즉 useEffectEvent 는 부수 작업 에만, 재실행 트리거 는 의존성 배열에 두라.

[감점 답변] 'SSR 용' 한 줄. [좋은 답변] 세 번째 인자는 서버에서 사용할 snapshot 이다. 빠뜨리면 SSR 에서 에러를 던지거나, 초기 렌더와 클라이언트 첫 렌더 값이 달라 hydration mismatch 가 발생한다. 일반적으로 () => false 나 결정론적 기본값을 넘긴다.

[감점 답변] '아무거나 써도 된다'. [좋은 답변]

• use(promise): Suspense 경계가 가까운 곳에 있을 때 적합. 비동기 트리의 일부만 지연시키고 나머지는 먼저 그릴 수 있다. 단, 매 렌더마다 새 Promise 를 만들면 무한 fetch.
• props 로 내려주기: 서버 컴포넌트에서 await 후 직렬화 가능한 값만 전달. 워터폴이 단순 하지만 클라이언트에서 일부만 새로고침 하기 어렵다.