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

# React useEffect 함정

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

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

## 💻 코드 패턴

```ts
// ✅ 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]]