• useMemo: 값 재계산 skip
• useCallback: 함수 참조 유지 (useMemo(() => fn, deps)와 동일)

📘 기본

const sorted = useMemo(() => heavySort(list), [list]);
const handleClick = useCallback(() => onSelect(id), [id, onSelect]);

• deps 변경 시에만 재생성
• 참조 동일성이 중요할 때 (memo child, effect deps, context)

✅ 쓸 만한 경우

• 무거운 계산 (filter, sort, chart data)
• memo된 자식에 callback 전달
• useEffect deps에 함수 넣을 때 stable reference

🚫 쓰지 않아도 되는 경우

• cheap 계산 (profiler로 확인)
• memo 안 쓰는 자식에 callback — 참조 유지 이득 없음
• deps가 매 render 바뀜 → memoization 무의미

⚛️ React Compiler (19+)

• 자동 memoization 실험 — 수동 useMemo/useCallback 감소 가능
• 여전히 의도 이해는 필요

🔗 참고 자료

• useMemo — 계산 결과 메모이제이션 API다.
• useCallback — 콜백 참조 안정화 API다.
• React Compiler — 자동 memoization 컴파일러를 소개한다.
• memo — 자식 리렌더 스킵과 참조 동일성의 관계를 설명한다.