React hooks (useCallback)

useCallback도 useMemo와 비슷한 함수다.

https://suzzeong.tistory.com/100

React Hooks (useMemo)

useMemo와 비슷하게 렌더링 성능을 최적화해야하는 상황에서 사용한다.

useCallback을 사용하면 함수를 재사용할 수 있다는 장점이 있다.

예를 들어서, 컴포넌트 함수에 함수가 선언이 되어 있으면 함수는 컴포넌트가 렌더링될 때마다 새로운 함수를 생성하게 된다. 하지만, useCallback을 사용하면, 컴포넌트가 랜더링된다고 해도 그 함수가 의존하는 값들이 바뀌지 않는 한, 기존 함수를 계속해서 반환한다.

const add = () => x + y;
const add = useCallback(() => x + y, [x, y]);

따라서, 컴포넌트의 렌더링이 자주 발생하거나 렌더링해야 할 컴포넌트의 개수가 많아지면 그 부분을 최적화해주는 것이 좋다.

 

useCallback은 콜백의 메모이제이션된 버전을 반환한다.

메모이제이션의 뜻은 위에 참고한 useMemo 글에 적혀있다.

const memoizedCallback = useCallback(
  () => {
    doSomething(a, b);
  },
  [a, b],
);

 

useCallback의 첫 번째 인수에는 생성함수를 넣고 두 번째 인수에는 배열을 넣으면 된다.

그 배열에는 어떤 값이 바뀌었을 때 함수를 새로 생성해야 하는지 잘 명시해야 한다.

 

+)

useCallback(fn, deps)은 useMemo(() => fn, deps)와 같다.

 

---

참고

https://ko.reactjs.org/docs/hooks-reference.html#usecallback

https://www.daleseo.com/react-hooks-use-callback/