useMemo, useCallback

useMemo

값을 캐싱하기 위해 사용합니다.

 

useCallback

함수를 캐싱하기 위해 사용합니다.

 

 

const Item = ({ item, onClick }) => <button onClick={onClick}>{item.name}</button>;

const Component = ({ data }) => {
  const value = useMemo(() => (복잡한연산 retrun true or false), [someStateValue]);
  const onClick = useCallback(() => {
    console.log(value);
  }, [value]);

  return (
    <>
      {data.map((d) => (
        <Item item={d} onClick={onClick} />
      ))}
    </>
  );
};

해당 코드처럼 

복잡한 연산을 다시 하지 않기 위해 결괏값을 저장해놨다가 의존하는 값이 변경될 때에만 재연산하는 것이 useMemo.

onClick함수를 매번 생성하지 않게 해주는 것이 useCallback입니다.

=> 매번 생성하지 않게 해주는 이유는 리렌더링을 막기 위해서입니다.

onClick함수가 매번 새롭게 생성되기 때문에 Component가 리렌더링 될 때마다 Item이 리렌더링 되는 것을 막기 위함.

 

 

그러나 useMemo, useCallback 또한 시간을 잡아먹기 때문에 신중하게 사용해야 합니다.

1. useMemo, useCallback자체가 리렌더링을 막아주는 것은 아닙니다.

해당 컴포넌트의 모든 프롭스를 다 저장하고, 해당 컴포넌트를 저장해야 리렌더링을 막을 수 있습니다.

 

2. 리렌더링을 막아주더라도 초기 렌더링을 느려지게 하는 것은 명백합니다(useMemo, useCallback의 cost 때문에).

 

3. 함수를 새로 생성하는 시간 vs 참조 동일성(대괄호 안 의존성 값들) 체크 시간 ==> (usememo, useCallback 없이 계속 함수 새로 만들기) vs (재사용했을 때 의존성시간 체크) => 별로 차이가 나지 않습니다,

 

결론

useMemo, useCallback으로 리렌더링을 막는 것이 아니라면 신중히 사용해야 합니다.

 

참고

https://surviveasdev.tistory.com/entry/%EC%9D%B8%ED%84%B0%EB%B7%B0-%EC%A7%88%EB%AC%B8-useCallback%EA%B3%BC-useMemo%EC%97%90-%EC%B0%A8%EC%9D%B4%EC%A0%90

인터뷰 질문 useCallback과 useMemo에 차이점

https://www.developerway.com/posts/how-to-use-memo-use-callback

How to useMemo and useCallback: you can remove most of them