메모이제이션 도구 선택표

React.memo, useCallback, useMemo는 같은 문제가 아니라 각각 컴포넌트, 함수 참조, 계산 결과를 안정화한다.

메모이제이션 도구React.memo, useCallback, useMemo는 같은 문제가 아니라 각각 컴포넌트, 함수 참조, 계산 결과를 안정화한다.
1

React.memo

props가 같을 때 자식 컴포넌트 함수 호출을 건너뛴다. · 대상 · 무거운 자식 컴포넌트

2

useCallback

렌더마다 새 함수가 생겨 memo 자식을 깨우는 상황을 줄인다. · 대상 · 함수 props

3

useMemo

비싼 계산 결과나 객체·배열 참조를 의존성이 바뀔 때만 갱신한다. · 대상 · 계산값, 객체, 배열

핵심선택 기준 컴포넌트를 막을지, 함수 참조를 막을지, 계산 결과를 재사용할지 먼저 정한다.