ReactのuseMemoについて

ReactのuseMemoについてまとめます。

参考記事
https://qiita.com/seira/items/42576765aecc9fa6b2f8

useMemoとは、関数の結果を保持するためのフックで、何回やっても結果が同じ場合の値などをメモ化し、そこから値を再取得します。
不要な再計算をスキップできるため、レンダリングの回数を減らせます。
useCallbackとの違いは、関数自体をメモ化しますが、useMemoは関数の結果を保持することです。

自分のポートフォリオでも以下のように利用しています。

export const Loginbutton = React.memo(() => {
  const loginContext = useContext<Context>(LoginContext);
  return (
    <div>
      <Button variant="outlined" className="m-auto w-50 my-2">
        <Link href="/login">{loginContext.text}</Link>
      </Button>
    </div>
  );
});

基本的にはコンポーネントに使います。こうすることによりレンダリングの回数が減るためおすすめです。

コンポーネントなどに導入してみてください。