useMemoってなんだ

はじめに

Reactのことなんもわからんので、調べていきます。

useMemoとは

React hookの一つ。

変数や関数をメモ化(一時メモリに保存)し、処理を簡略化することである。

useMemoはレンダー中に実行されるため、通常実行しない処理はuseEffectで行いましょう。またレンダーを実行させないためなら、コンポーネントを分割しましょう。useMemoはパフォーマンス最適化のために使うものであり、意味上の保証があるものだと思わないこと。

使い方

const [number, setNumber] = useState(0);

const expensiveFunction = (n: number) => {
  console.log("function re-rendered");
  let total = 0;
  for (let i = 1; i < n; i++) {
    total += i;
  }
  return total;
};
const sum = useMemo(() => expensiveFunction(number), [number]);

まとめ

パフォーマンスを切り詰めるために使うものであり、無闇に使うものではない。よく考えて使おう。

参考