useMemoの使い方

useMemoとは？

React の フック の一つで計算コストの高い処理の結果をキャッシュし、再利用するために使用する。（何度も同じ処理回さない）

const sortedBlogs = useMemo(() => {
  return [...allBlogs].sort(
    (a, b) =>
      new Date(b.metadata.publishedAt).getTime() - new Date(a.metadata.publishedAt).getTime()
  );
}, [allBlogs]);

などのようにして使う。

const data = () = {}の () = {}部分をuseMemo()で囲むイメージ。

useMemo（メモ化）の利点は、allBlogsの値が変わらなければキャッシュしたsortedBlogsの計算結果をそのまま返すようにしてくれるので計算処理分軽くなる。

ただ、メモリの容量を使う面もあるので乱用は禁物の模様。