HomeAboutMeBlogGuest
© 2025 Sejin Cha. All rights reserved.
Built with Next.js, deployed on Vercel
🚀
개발 노트
/
🎪
useMemo와 useCallback 남용
🎪

useMemo와 useCallback 남용

 
useMemo와 useCallback은 유사하다.
내부에서 발생하는 연산을 최적화한다. 특정 값이 바뀌었을 때만 연산을 실행하고,
바뀌지 않았으면 이전에 연산했던 결과를 다시 사용한다.
 
연산 비용이 크지 않다면 오히려 낭비일 수 있다.
메모제이션용 메모리가 필요하므로 useMemo와 useCallback을 남용하면 안 된다.
그리고 실제 성능을 측정하는 방법을 배워야 한다.
 

useMemo

notion image
 
 
useMemo 사용으로 큰 성능 개선이 있을 거라고 생각하지 말고, 가능하면 useMemo를 사용하지 않고 코드를 작성하라. useMemo 자체적인 메모리의 사용이, useMemo를 통한 득보다 많을 수도 있다.
by 공식문서

useCallback

useCallback도 실제로는 성능 향상에 큰 영향을 주지 않을 수 있으며, 되려 악화시킬 수 있다.
notion image
(특히 useCallback 및 useMemo에 대한 비용은 동료에게 코드를 더 복잡하게 만들고, 종속성 배열에서 실수를 할 수 있으며, 기본 제공 후크를 호출하고 종속성 및 메모된 값이 가비지 콜렉터에 의해 수집되는 것을 막아 잠재적으로 성능을 악화시키는 것입니다. 필요한 성능상의 이점을 얻을 경우 발생하는 비용은 괜찮지만, 먼저 측정하는 것이 가장 좋습니다)
 
 

참고 자료

React.memo() 현명하게 사용하기
유저들은 반응이 빠른 UI를 선호한다. 100ms 미만의 UI 응답 지연은 유저들이 즉시 느낄 수 있고, 100ms에서 300ms가 지연되면 이미 유저들은 상당한 지연으로 느낀다. UI 성능을 증가시키기 위해, React는 고차 컴퍼넌트(Higher Order Component, HOC) `React.memo()`를 제공한다. 렌더링 결과를 메모이징(Memoizing)함으로써, 불필요한 리렌더링을 건너뛴다.
React.memo() 현명하게 사용하기
https://ui.toast.com/weekly-pick/ko_20190731/
React.memo() 현명하게 사용하기
When to useMemo and useCallback
Here's a candy dispenser: Here's how it's implemented: Now I want to ask you a question and I want you to think hard about it before moving forward. I'm going to make a change to this and I want you to tell me which will have the better performance characteristics.
When to useMemo and useCallback
https://kentcdodds.com/blog/usememo-and-usecallback
When to useMemo and useCallback