• 목록
• 게시판 리스트 옵션
  • 검색

✅ useMemo와 useCallback 남발하면 더 느려진다?

진짜 필요한 곳만 써야 하는 이유

많이들 이렇게 쓴다:

const memoizedValue = useMemo(() => computeHeavy(data), [data]);
const handleClick = useCallback(() => doSomething(id), [id]);

근데 이걸 무조건 쓰면 오히려 성능이 나빠질 수도 있다.

✅ 이유는 간단하다

useMemo, useCallback 자체도 연산 비용이 있다.
필요도 없는 곳에 쓰면 불필요한 메모이제이션만 발생하고,
가독성도 떨어진다.

✅ 언제 써야 하나?

• 컴포넌트가 자주 리렌더링 될 때

• props로 함수를 자식에게 넘길 때

• 계산 비용이 클 때

그 외에는 과감하게 생략하는 게 낫다.