Memoization(memo, useCallback)

 

Memoization,
기존에 수행한 연산의 결과값을 저장해두고
동일한 input이 들어오면 재사용 하는 프로그래밍 기법

useMemo

---

const z = useMemo(() => compute(x, y), [x, y]

• 첫번째 인자로 결과값을 생성해주는 팩토리 함수
• 두번째 인자로 기존 결과값의 재사용 여부를 결정할 기준이 되는 입력값의 배열
• x, y가 전과 동일할 경우 저장해두었던 결과값을 재사용함
• x, y가 전과 달라졌을경우, () => compute(x, y) 함수를 호출하여 결과값을 새롭게 구해 z에 할당

 

사용시 주의점

• 필요 이상의 사용으로 컴포넌트 복잡도를 넢여 유지보수성을 떨어뜨리지 않게 할것
• useMemo가 적용된 reference는 재사용을 위해 가비지 컬렉션에서 제외되기 때문에 메모리를 더 쓰게 됨
• 수초이상 걸리는 로직에 대해서만 고려하고 useEffect 등 비동기로 처리하는 방안을 먼저 고려하고나서 극히 제한적으로 사용
• 여러번 리렌더링이 일어난다고해서 심각한 성능이슈로 이어지는 경우는 적음

 

useCallback

---

useCallback 은 useMemo(() => fn, deps) 와 같다.

 

memoization에 사용되는 비용

• useCallback 을 사용함으로써 새로운 함수생성
• 새로운 배열을 만들어 함수를 실행
• deps의 동일성을 비교하기위한 함수와 종속성 집합을 메모리에 저장하게 됨

부하의 크기에 따른 reder 시간 비교

위 그림을 통해 복잡도가 비교적 높은 내용은 memo 하더라도 최초 render 시 비용은 일반 render에 비해 훨씬 높을 수 있음
대신 re-render 비용이 현저히 낮아져 복잡도가 높으면서 자주 re-render 되는 경우가 효율이 좋을것으로 예상됨

 

 

결론

• 최적화를 위한 훅을 호출하는 비용
• 메모이제이션을 위한 메모리
• 가비지 컬렉션이 되지 않은 상태에서 새로운 함수 생성되어 메모리 관리를 받지 못하는 메모리 사용
• 대부분의 불필요한 리렌더링의 최적화는 리액트가 충분히 빠르기 때문에 신경쓰지 않아도됨
• React.memo, React.PureComponent등은 반드시 퍼포먼스 측정 후 사용하는것이 필요함
• 복잡도가 높고, re-render가 자주 발생하는 경우 사용하는것이 효율적

모든 추상화와 최적화는 나름의 비용을 치르게 되어있기때문에
성급한 추상화를 피하고 필요에 따라 적용하는것을 권장

특정 컴포넌트가 퍼포먼스 문제를 일으킨다고 판단될때 명확한검증을 통해 판단이 맞는지 확인한 후 최적화 과정을 거치는것이 필요함

 

최적화 훅을 사용하는것 또한 새로운 관리포인트(의존성 배열) 이다.

 

참고자료

https://www.daleseo.com/react-hooks-use-memo/

React Hooks: useMemo 사용법

https://www.daleseo.com/react-hooks-use-callback/

React Hooks: useCallback 사용법

https://react.vlpt.us/basic/18-useCallback.html

18. useCallback 를 사용하여 함수 재사용하기 · GitBook

https://yceffort.kr/2022/04/best-practice-useCallback-useMemo

Home

https://www.rinae.dev/posts/review-when-to-usememo-and-usecallback

'When to useMemo and useCallback' 를 읽고

https://github.com/yeonjuan/dev-blog/blob/master/JavaScript/should-you-really-use-usememo.md

GitHub - yeonjuan/dev-blog: 개발 블로그, 공부한거 정리