useCallback, useMemo 제대로 사용하자

들어가기 앞서

아래의 링크를 자세히 읽어보는 것을 추천한다.
useCallback vs useMemo
So when should I useMemo and useCallback?

요약

referential equality가 핵심이고, 이에 따라 re-rendering을 해주어야 안해주어야 하는지 판단할 줄 알아야 한다.

무지성으로 쓴다면 오히려 더 성능에 좋지 않다.

• 메모리를 계속 잡아먹고 있어 gc가 안됨
• memo, callback을 생성하기위해 추가로 여러 함수 및 변수를 실행하기에 좀더 복잡한 연산을 해야한다.

useMemo

• 고비용 연산을 하는데 캐쉬가 필요할 때
• props이 같을 경우 re-render를 하지말아야 할때
• props가 같은지 비교하는건 referential equality를 참고해야한다.

useCallback

• 하위 컴포넌트 props 일부가 function일 때는 useCallback으로 선언하여 reference를 동일하게 하기 위함