공식문서 읽고 기록 남기기
몰랐거나 확실하지 않았던 개념 기록하기

React.useCallback

리렌더링 될 때 function을 캐시 할 수 있는 Hook

useCallback(fn, dependencies)

custom Hook 최적화에 좋음
return되는 모든 function을 useCallback으로 래핑하는 것이 좋습니다.

React.useMemo

리렌더링 될 때 계산결과를 캐시 할 수 있는 Hook

useMemo(calculateValue, dependencies)
useMemo(() => fn, dependencies)

In general, unless you’re creating or looping over thousands of objects,
it’s probably not expensive. If you want to get more confidence,
you can add a console log to measure the time spent in a piece of code:

일반적으로 천 개 이상의 객체를 만들거나 반복하지 않으면 그렇게 비싸지 않지만
확신을 얻고 싶을 땐 콘솔로그로 코드의 시간을 측정 할 수 있습니다.

console.time('filter array');
const visibleTodos = filterTodos(todos, tab);
console.timeEnd('filter array');

특정 상호 작용이 지연되는 경우 React Developer Tools 프로파일러를 사용하여 메모이제이션에서 가장 많은 이점을 얻을 수 있는 구성 요소를 확인하고 필요한 경우 메모이제이션을 추가합니다.

Memo

component가 변경 되지 않은 경우 리렌더링을 건너 뛸 수 있습니다.

memo(Component, arePropsEqual?)

구성 요소가 다시 렌더링될 때 (인지할 수 있는) 지연이 없다면 memo는 필요하지 않습니다.

memoization 주의 사항

• "항상 새로운" 단일 값이면 전체 구성 요소의 메모이제이션을 사용하지 않아도 충분합니다.
• 불필요하게 많은 memoization는 가독성을 떨어트립니다.

공식문서를 읽어볼수록 아직은 써볼 만한 곳이 custom Hook에서의 useCallback 말고는 없을 것 같다