useCallback

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

useCallback은 memoized callback을 리턴한다.

 

memoized는 뭘까? 위키백과에 따르면

In computing, memoization or memoisation is an optimization technique used primarily to speed up computer programs by storing the results of expensive function calls and returning the cached result when the same inputs occur again.

컴퓨팅에서 memoization 또는 memoisation은 비용이 많이 드는 함수 호출의 결과를 저장하고 동일한 입력이 다시 발생할 때 캐시 된 결과를 반환하여 컴퓨터 프로그램의 속도를 높이는 데 주로 사용되는 최적화 기술이라고 한다.

 

예를 들어, 컴포넌트 안에 선언된 함수는 리렌더링 될 때마다 새로 만들어진다. 이렇게 재선언하는 것이 메모리, CPU 등에 무리가 되지 않지만 필요할 때만 재선언하는것은 중요하다.

 

useCallback을 이용해서 선언된 함수를 재사용할 수 있다. 두 번째 인자에는 빈 배열([])을 주면 처음 렌더링 시에만 만들어진다. 이 안에 특정값을 준다면 그 값이 바뀔 때마다 다시 만든다.

 

하지만, 성능 최적화를 무조건적으로 하는 건 좋지 않다.(코드 복잡해지고 유지보수가 어려워지기 때문에) 필요에 따라서 사용해 주는 것이 좋다!