useCallback 및 useMemo 오용

성능을 향상시킨다고 생각하시나요? 과도하게 사용하면 오히려 속도가 느려질 수 있습니다.

왜 이런 일이 발생하는가

• useMemo와 useCallback은 계산이나 함수가 비용이 많이 드는 경우에만 도움이 됩니다.
• "혹시 모르니" 모든 것을 감싸는 것은 오버헤드와 복잡성을 추가합니다.
• 실제 성능 이슈가 없다면, CPU 사이클을 낭비하고 팀원들을 혼란스럽게 만들 뿐입니다.

하지 말아야 할 것

const doubled = useMemo(() => value * 2, [value]);
const handleClick = useCallback(() => {
  console.log("clicked");
}, []);

// ❌ 낭비: 간단한 수학 연산 + 간단한 함수는 메모이제이션이 필요 없음

해야 할 것

// ✅ 단순하게 유지하기
const doubled = value * 2;
const handleClick = () => console.log("clicked");

// ✅ 비용이 많이 드는 작업만 메모이제이션하기
const sortedList = useMemo(
  () => heavySort(list),
  [list]
);

설명

저렴한 연산은 메모이제이션하지 마세요 — React는 이미 빠릅니다.

비용이 많이 드는 계산이나 깊은 자식 컴포넌트에 전달되는 안정적인 참조만 메모이제이션하세요.

useMemo/useCallback은 메스(수술용 칼) 🔪처럼 생각하세요, 덕트 테이프가 아닙니다.

모든 곳에 useMemo를 사용하는 것은 리모컨을 버블랩으로 감싸는 것과 같습니다 📺. 물론 "보호"되긴 하지만 — 이제 사용하기가 엄청 귀찮아졌습니다. 😅