원인을 분리한 뒤 컴포넌트, 값, 함수 중 하나만 고른다
메모이제이션 도구는 서로 대체재가 아니다. 리렌더링 원인이 무엇인지에 따라 위치가 달라진다.
1
증상부모 상태만 바뀌는데 비싼 자식도 다시 그림
도구React.memo
근거props가 같으면 컴포넌트 렌더를 생략할 수 있다.
2
증상렌더마다 정렬, 필터, 집계 계산이 반복됨
도구useMemo
근거deps가 같을 때 파생값을 재사용한다.
3
증상자식에게 넘기는 함수 참조가 매번 바뀜
도구useCallback
근거React.memo와 함께 쓸 때 콜백 props를 안정화한다.
4
증상비용이 작거나 deps가 계속 바뀜
도구적용하지 않음
근거비교·캐시 비용이 최적화 이득보다 클 수 있다.