メモ化とは

リソースを消費する関数を実行する際に、メモリと実行時間を最小限に抑えることができるパフォーマンスチューニングの一つ。関数が計算した値、あるいはオブジェクトをキャッシュすることにより機能する。

React.memo

propsが変更されない限り、再レンダリングをスキップする。

重い処理があり、propsで渡ったcountを表示するコンポーネント。

export const Memo = memo(({ count }: Props) => {
  console.log('Memo rendering');
  setTimeout(() => {
    console.log('Memo: HeavyProcessing done');
  }, 1000);
  return <p>Memo: secont-count is {count}</p>;
});

secondCountの値が変わったときのみMemoコンポーネントを再レンダリングする。

function App() {
  const [firstCount, setFirstCount] = useState(0);
  const [secondCount, setSecondCount] = useState(0);

  const handleClickFirstCount = () => {
    setFirstCount(firstCount + 1);
  };

  const handleClickSecondCount = () => {
    setSecondCount(secondCount + 1);
  };

  return (
    <>
      <h1>Performance-tuning</h1>
      <div className='card'>
        <button onClick={handleClickFirstCount}>
          first-count is {firstCount}
        </button>
        <button onClick={handleClickSecondCount}>
          second-count is {secondCount} (memo)
        </button>
      </div>
      <Memo count={secondCount} />
    </>
  );
}

export default App;

使いどころ

• porpsの変更が少ない
• コンポーネントの処理が重く、処理結果が同じ結果を返す
• 子コンポーネントが多い

useCallback

関数をメモ化するフック。依存する値が変化しない限り、キャッシュしたコールバック関数を使用する。

重い処理があり、propsで関数が渡されるコンポーネント。

export const UseCallback = memo(({ handleClick }: Props) => {
  console.log('useCallback rendering');
  setTimeout(() => {
    console.log('useCallback: HeavyProcessing done');
  }, 1000);
  return <button onClick={handleClick}>CallBack</button>;
});