Hook – useMemo使い方

今回は、useMemoについて整理していきたいと思います。

useMemoとは

レンダリング時に特定の値が変わった時のみ、演算を行って指定した値が変わっていない時は以前演算した結果を再利用するHookです。

上記の理由でパフォーマンスの向上が期待出来ます。

サンプル

const avg = useMemo(() => getAverage(list), [list]);

• １番目のパラメータで平均値を取得する関数を渡し、２番目のパラメータには配列を渡しています。
• ２番目のパラメータ：値が変わった時だけ演算を行いたい変数名
  • 配列が渡されなかった場合は、新しい値がレンダーごとに毎回計算されます。

const TodoList = ({ todos, onRemove, onToggle }) => {
  const rowRenderer = useCallback(
    ({ index, key, style }) => {
      const todo = todos[index];
      return (
        <TodoListItem
          todo={todo}
          key={key}
          onRemove={onRemove}
          onToggle={onToggle}
          style={style}
        />
      );
    },
    [onRemove, onToggle, todos],
  );

  return (
    <List
      className="TodoList"
      width={512} // 全体大きさ
      height={513} // 全体高さ
      rowCount={todos.length} // 項目数
      rowHeight={57} // 項目高さ
      rowRenderer={rowRenderer} // 項目をレンダリングするときの関数
      list={todos} // 配列
      style={{ outline: 'none' }} // Listタグの基本スタイルを除外
    />
  );
};

export default React.memo(TodoList);

• 一番最後にコンポーネントを渡すこともできます。
• コンポーネントに変更がある時だけTodoListはレンダリングします。

終わりに

この記事は自分が勉強しながら理解した内容をメモしただけなので、間違っている内容もある可能性があります。

まだ、使いこなしていない感じなのでプライベートプロジェクトでガンガン使ってみたいと思います。