- memo
- 컴포넌트를 캐싱
- useMemo()
- 값을 캐싱
- 언제 쓰는가
- 간단한 계산에는 불필요
- 렌더링 중에 정렬, 필터링, 형식 변경 등으로 비용이 많이 드는 계산의 경우
- useMemo 훅 내부에 래핑된 컴포넌트에 prop을 전달하고 prop에 변경이 없을 때 리렌더링을 건너뛰려는 경우. 즉, 순수 컴포넌트는 UseMemo로 래핑할 수 있다.
- 래핑된 컴포넌트에 전달되는 값이 다른 훅의 의존성으로 사용되는 경우
- 흔한 사용 실수
- 명시적으로 return문 사용하거나 ()로 감싸기
- 의존성이 없다면 매번 실행
- 루프 내에서 호출
- 래핑하거나, 새로운 컴포넌트로 추출(자식에게 위임)
- useCallback()
- 함수를 캐싱
- 함수 정의나, 화살표 함수를 자식 컴포넌트로 전달하면 매번 자식 컴포넌트를 리렌더링한다
- 렌더링마다 새로운 함수로 취급되기 때문
- 새로운 함수 객체로 힙에 올라가므로 자식 컴포넌트는 변경되었다고 감지하여 리렌더링 유발
- React Devtools - profiler 세션에서 지연 컴포넌트 식별에 유용