2nd/10_Wiki/Topics/Coding/React_useEffect_Pitfalls.md

id, title, category, status, source_trust_level, verification_status, created_at, updated_at, tags, tech_stack, applied_in, aliases

id	title	category	status	source_trust_level	verification_status	created_at	updated_at	tags	tech_stack	applied_in	aliases
react-useeffect-pitfalls	React useEffect 함정 (Pitfalls)	Coding	draft	B	conceptual	2026-05-09	2026-05-09	react hooks useEffect side-effects vibe-coding	language applicable_to TypeScript / React 18+ Web React Native		useEffect dependency effect cleanup stale closure

React useEffect 함정

useEffect 는 "이 effect 가 어떤 값에 의존하는가" 와 "언제 cleanup 해야 하는가" 두 질문에 답할 때만 쓴다. 동기화 도구지 lifecycle 후크가 아니다.

📖 핵심 개념

• useEffect 는 외부 시스템과의 동기화 (DOM, network, subscription, timer) 도구.
• 의존성 배열 = effect 가 다시 실행되어야 하는 조건.
• StrictMode 에서 의도적으로 두 번 실행 → cleanup 누락 즉시 노출.

💻 코드 패턴

// ✅ subscription — cleanup 필수
useEffect(() => {
  const sub = api.subscribe(setData);
  return () => sub.unsubscribe();
}, [api]);

// ✅ AbortController 로 stale fetch 방지
useEffect(() => {
  const ac = new AbortController();
  fetch(`/api/users/${id}`, { signal: ac.signal })
    .then(r => r.json()).then(setUser).catch(e => { if (e.name !== 'AbortError') throw e; });
  return () => ac.abort();
}, [id]);

🤔 의사결정 기준

상황	useEffect	다른 도구
외부 동기화 (DOM event, subscription, API)	✅	—
props/state 에서 파생 값 계산	❌	그냥 변수 / useMemo
이벤트 핸들러 안에서 일어날 일	❌	onClick 안에서 직접
한 번만 실행 (mount 시)	StrictMode 두 번 실행 가정	useRef 가드 + 명시적 cleanup

❌ 안티패턴

• 빈 deps 배열로 "componentDidMount 흉내": StrictMode 에서 두 번. cleanup 안 짜면 leak.
• state 를 effect 에서 다른 state 로 derive: 렌더 → effect → setState → 재렌더. 그냥 변수로 계산.
• deps 누락: stale closure. ESLint react-hooks/exhaustive-deps 켜기.
• 객체/배열 리터럴을 deps: 매 렌더 새 참조 → 무한 루프. useMemo/useCallback or primitive 로.
• async 함수를 effect 직접: cleanup 못 받음. 안에서 IIFE 또는 별도 함수.

🤖 LLM 활용 힌트

• "effect 가 외부 시스템 동기화인지, 단순 derived value 인지 판단해라" 라고 명시.
• cleanup 항상 요청.
• exhaustive-deps lint 가정.

🔗 관련 문서

• React_useMemo_When_Not_To
• React_Strict_Mode_Effects