2nd/10_Wiki/Topics/Coding/React_useMemo_When_Not_To.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-usememo-when-not-to	useMemo 를 쓰지 말아야 할 때	Coding	draft	B	conceptual	2026-05-09	2026-05-09	react hooks useMemo performance vibe-coding	language applicable_to TypeScript / React 18+ Web React Native		memoization premature optimization reference equality

useMemo 를 쓰지 말아야 할 때

useMemo 는 무료가 아니다. 의존성 비교 + 클로저 유지 비용. 참조 동일성이 진짜 필요할 때만 또는 계산이 진짜 비싼 경우만 쓴다.

📖 핵심 개념

useMemo 는 두 가지 목적:

1. 참조 동일성 보장: 자식의 useEffect/useMemo deps 또는 React.memo 비교에 사용
2. 고비용 계산 캐시: 매 렌더 다시 계산 안 함

이 둘이 아니면 useMemo 는 오히려 메모리 + 비교 비용만 추가.

💻 코드 패턴

// ✅ 자식 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