[G1-Sync] Manual knowledge update

10_Wiki/Topics/Coding/React_useMemo_When_Not_To.md

@@ -0,0 +1,63 @@
+---
+id: react-usememo-when-not-to
+title: useMemo 를 쓰지 말아야 할 때
+category: Coding
+status: draft
+source_trust_level: B
+verification_status: conceptual
+created_at: 2026-05-09
+updated_at: 2026-05-09
+tags: [react, hooks, useMemo, performance, vibe-coding]
+tech_stack: { language: "TypeScript / React 18+", applicable_to: ["Web", "React Native"] }
+applied_in: []
+aliases: [memoization, premature optimization, reference equality]
+---
+
+# useMemo 를 쓰지 말아야 할 때
+
+> useMemo 는 무료가 아니다. 의존성 비교 + 클로저 유지 비용. **참조 동일성이 진짜 필요할 때만** 또는 **계산이 진짜 비싼 경우만** 쓴다.
+
+## 📖 핵심 개념
+useMemo 는 두 가지 목적:
+1. **참조 동일성 보장**: 자식의 useEffect/useMemo deps 또는 React.memo 비교에 사용
+2. **고비용 계산 캐시**: 매 렌더 다시 계산 안 함
+
+이 둘이 아니면 useMemo 는 오히려 메모리 + 비교 비용만 추가.
+
+## 💻 코드 패턴
+
+```ts
+// ✅ 자식 useEffect deps 안정화
+const config = useMemo(() => ({ id, mode }), [id, mode]);
+useChildHook(config); // config 가 매 렌더 새 객체면 자식 effect 무한 trigger
+
+// ✅ 진짜 비싼 계산
+const sorted = useMemo(() => bigArray.slice().sort(cmp), [bigArray]);
+
+// ❌ 단순 변환 — useMemo 비용이 더 큼
+const upper = useMemo(() => name.toUpperCase(), [name]);
+```
+
+## 🤔 의사결정 기준
+| 상황 | useMemo |
+|---|---|
+| 자식 props 가 객체/배열, React.memo 적용 자식 | ✅ |
+| 자식의 useEffect deps 로 들어감 | ✅ |
+| 정렬·필터 등 O(n log n) 이상 계산, n>1000 | ✅ |
+| 단순 string 변환, 산술 | ❌ (useMemo 비용 > 계산 비용) |
+| 이미 useState 의 setState lazy init 으로 충분 | ❌ |
+
+## ❌ 안티패턴
+- **모든 계산에 useMemo**: cargo cult. 99% 의 useMemo 는 이득 < 비용.
+- **deps 에 객체 리터럴**: `useMemo(() => foo(opts), [{ a: 1 }])` — 매번 새 객체, 영원히 미스.
+- **side effect in factory**: useMemo 는 pure 가정. fetch / setState 넣으면 React 가 임의 실행 가능.
+- **React.memo 없이 props 안정화만 위해 useMemo**: 자식이 memoized 안 되면 의미 없음.
+- **실측 안 한 최적화**: Profiler 로 측정 후 결정.
+
+## 🤖 LLM 활용 힌트
+- "useMemo 는 (a) React.memo 자식 props 안정화 또는 (b) 측정된 비싼 계산만" 명시.
+- LLM이 unnecessary useMemo 추가하면 제거 요청.
+
+## 🔗 관련 문서
+- [[React_useCallback_Reality]]
+- [[React_Rendering_Optimization]]