reselect の仕組みと使い方

最終更新日： 2024年7月3日（水）
公開日： 2024年7月10日（水）

背景

Reduxのドキュメントを見ていると「reselect」というライブラリについて書かれており、うまく利用すればパフォーマンスチューニング（システムのパフォーマンスを向上させること）できることを知りました。

今回ドキュメントを読み進めていく中で reselect についていろいろなことを知り、自分なりに使用方法やreselectの内部で起きているメモ化についてわかりやすくまとめてみました。

これからreselectを使用する人の参考になれば幸いです。

reselect とは？

reselect とはメモ化（変数・関数・コンポーネントのキャッシュを再利用しコンポーネントの不要な再レンダリングを抑えること）された Selector 関数（Store の State に基づいたデータを返す関数。ReactでいうとuseSelectorなど）を作成するためのReduxライブラリです。

Selector関数をメモ化するので、不要なSelector関数の再計算を防ぐことができます。

また、reselectは、入力値に基づいてメモ化されたSelector 関数（outputSelector）を生成するcreateSelector APIを提供します。

使用方法は、メモ化されたSelector関数を生成する createSelector を component に import することで使用することができます。

createSelectorは、入力セレクタ（inputSelector）と結果関数（resultFunc）を受け取り、抽出された値が変更されたときにのみ出力を再計算します。

基本的な使い方

const outputSelector = createSelector(
  [inputSelector1, inputSelector2, inputSelector3], // synonymous with `dependencies`.
  resultFunc // Result function
)

使用例は下記の通りです。（ほぼドキュメントを抜粋したもの）

import React from 'react';
import { createSelector } from 'reselect';

const ReselectExample = () => {
  const state = {
    todos: [
      { id: 0, completed: false },
      { id: 1, completed: true }
    ],
    alerts: [
      { id: 0, read: false },
      { id: 1, read: true }
    ]
  };

  const selectCompletedTodos = (state) => {
    console.log('selector ran');
    return state.todos.filter(todo => todo.completed === true);
  };

  selectCompletedTodos(state); // selector ran
  selectCompletedTodos(state); // selector ran
  selectCompletedTodos(state); // selector ran

  const memoizedSelectCompletedTodos = createSelector(
    [(state) => state.todos],
    (todos) => {
      console.log('memoized selector ran');
      return todos.filter(todo => todo.completed === true);
    }
  );

  memoizedSelectCompletedTodos(state); // memoized selector ran
  memoizedSelectCompletedTodos(state);
  memoizedSelectCompletedTodos(state);

  console.log(selectCompletedTodos(state) === selectCompletedTodos(state)); //=> false

  console.log(
    memoizedSelectCompletedTodos(state) === memoizedSelectCompletedTodos(state)
  );

  return (
    <>
    </>
  );
};

export default ReselectExample;

上記のコードをコピペし、google dev tools の console で確認していただくと、memoizedSelectCompletedTodosは 2度目、3度目は実行されず、前回と同じ戻り値を返しています。

このように、不要な再計算をスキップ（メモ化）するだけでなく、memoizedSelectCompletedTodos は、再計算がなければ前回キャッシュされた結果の値を返します。

また、reselectのメモ化は通常のメモ化とは異なります（reselectのメモ化を Cascading Memoization と言います）。

通常のメモ化だと、下記のように与えられた引数が前回と同じ値かどうか判断し、同じなら前回と同じ結果を返し、そうでないなら再び関数を実行します。