참조 대상 분리
자식에게 넘기는 이벤트 함수는 useCallback, 렌더 중 만든 배열·객체·계산값은 useMemo 후보입니다.
memo 자식 prop함수 identity
useCallback(fn,deps)동일 함수 참조
expensive calculation필터링·정렬
useMemo(calc,deps)캐시된 결과
reactive deps 점검
콜백이나 계산 함수 안에서 읽는 props, state, 지역 변수를 deps에 넣어 exhaustive-deps 경고를 없앱니다.
React.memo 확인
함수 참조 안정화는 memo된 자식이 prop identity로 재렌더를 건너뛸 때 효과가 커집니다.
Profiler로 유지
React DevTools Profiler나 console.time으로 렌더 횟수와 계산 시간이 실제로 줄었는지 확인합니다.
적용 신호
- 가벼운 계산이나 매번 새로 만들어도 싼 함수는 메모이제이션 비용이 더 클 수 있습니다.
- deps를 억지로 비우면 콜백이 오래된 props와 state를 읽는 stale closure가 생깁니다.
- memo된 자식, context value, 무거운 필터·정렬처럼 identity나 계산 비용이 병목일 때 적용합니다.
반환 차이
useCallback같은 함수 객체를 재사용
useMemo계산 함수의 반환값을 재사용
depsObject.is 비교가 캐시 무효화 조건