useMemo vs useCallback vs React.memo

useMemo

useMemo는 memoized된 값을 return하는 hook이다. 인자로 함수와 의존성 배열을 받는데, 두번째 인자로 준 의존 인자 중에 하나라도 변경되면 값을 재계산한다. 만약 의존 인자로 아무것도 전달되지 않는다면, 렌더시마다 항상 값을 새롭게 계산하여 return한다.

따라서 컴포넌트를 렌더링 할 때마다 값을 매번 계산하지 않고, 경우에 따라서만 재계산한다. 이를 통해 매 렌더시마다 소요되는 불필요한 계산을 피할 수 있다. 

 

import React, { useMemo } from 'react';
import { sum } from './util';

const Calculator = ({v1, v2}) => {
  const value = useMemo(() => sum(v1,v2), [v1, v2]);

  return <p>{`sum is ${value}`}</p>;
}

 

• v1, v2 중 하나라도 변경되면, sum() 을 실행시켜서 value에 대입한다.
• 하나도 변경되지 않는다면, 함수를 실행하지 않는다.
• hook이다. 함수형에서만 사용가능하다.

useCallback

useCallback은 useMemo와 흡사하지만, 일반적으로 함수를 memoized한다.

리액트 컴포넌트는 렌더링 될 때 마다 함수를 새로 생성한다는 단점이 있다. 부모 컴포넌트가 렌더링되거나, 상태(state)가 변경되는 경우 React 컴포넌트는 렌더링을 유발한다.

따라서 useCallback이란 Hook을 통해 함수를 memoization 한다. 그렇게 되면, useMemo와 마찬가지로 memoized된 함수가 두번째 의존 인자에서 변경사항이 생길때에만 새로운 함수로 다시 생성된다.

 

React.memo

React.memo는 Higher-Order Components(HOC) 이다.

 

🧐 HOC란?

컴포넌트를 인자로 받아 새로운 컴포넌트를 다시 return해주는 함수이다. 즉, 인자로 받은 컴포넌트를 새로운 별도의 컴포넌트로 만든다.

만약 컴포넌트가 같은 props를 받을 때 같은 결과를 렌더링한다면 React.memo를 사용하여 불필요한 컴포넌트 렌더링을 방지할 수 있다. 즉, 컴포넌트가 React.memo()로 래핑되면, React는 컴포넌트를 렌더링하고 결과를 메모이징(Memoizing)한다. 그리고 다음 렌더링이 일어날 때 이전 props와 현재 props를 얕은 비교한다. props가 같다면, React는 메모이징(Memoizing)된 내용을 재사용한다. 즉, 컴포넌트에 같은 props가 들어온다면 리액트는 컴포넌트 렌더링 과정을 스킵하고 마지막에 렌더링된 결과를 재사용한다. 따라서, 컴포넌트가 같은 props로 자주 렌더링이 되는 경우 사용한다.

그런데, React.memo는 오직 props가 변경됐는지 아닌지만 체크한다. 만약 React.memo에 감싸진 함수형 컴포넌트가 함수 내부에서 useState나 useContext같은 Hook을 사용하고 있다면, state나 context가 변경될 때마다 리렌더링된다.

 

const Calculator = ({ v1, v2 }) => {
  return <p>{ v1 } + { v2 } is { v1 + v2 }</p>;
};

export default React.memo(Calculator);

 

출처
https://velog.io/@yu_yu/useMemo-useCallback-React.memo-gu4rsta9

https://sustainable-dev.tistory.com/137