useCallback ?

useCallback은 useMemo와 마찬가지로 렌더링 최적화를 위해 사용하는 React Hook 중에 하나이다

함수를 메모이제이션 하는 Hook이고 첫번째 인자로 넘어온 함수를, 두번째 인자로 의존성 배열을 사용한다

ex)

const memoizationFn = useCallback(fn, deps)

기본적으로 react 컴포넌트 내에 선언된 함수는 해당 컴포넌트가 렌더링 될때마다 다시 생성된다

const anyFn = () => a + b;

그러나 useCallback을 사용하면 해당 컴포넌트가 리렌더링 되어도 의존성 배열의 값이 바뀌지 않으면 기존 함수를 계속 반환한다

const memoizationCallback = useCallback(() => a + b, [a, b]);

그러면 어떨때 사용할까?

지난번 포스팅 했던 useMemo와 마찬가지로 부모 컴포넌트로 받은 state / props 가 변경되면 리렌더링이 되기 때문에 해당 함수가 계속 반복되어 실행된다 이럴때 useCallback을 사용해주면 된다

useMemo / useCallback 차이점

보기엔 둘의 차이점이 없는것 같다 하지만 엄연히 존재한다 !

useMemo는 함수의 값 만 메모이제이션 해서 반환하고
useCallback은 함수 자체를 메모이제이션 해서 반환한다
이것이 둘의 핵심적인 차이점 이다

따라서 자식컴포넌트의 특정한 props 값들을 최적화 시킬때는 useMemo

부모컴포넌트에서 무거운 props 함수를 넘겨줄 때에는 useCallback 을 사용하는 것이 좋아보인다

ref: https://velog.io/@kysung95/%EC%A7%A4%EB%A7%89%EA%B8%80-useCallback%EC%9D%84-%EC%82%AC%EC%9A%A9%ED%95%B4%EB%B3%B4%EC%9E%90