What is the suggested way to migrate over to v5?

[misha-erm]

Hello 👋🏻

In our app we used selector factories intensively. Actually we used to create groups of those and pass it via context to underlying components. This way we could reuse cache along the whole tree.

export const makeListStateSelectors = (instanceKey: string) => {
  const makeListPropSelector = (key: string) => (state: RootState) => state.lists[instanceKey]?.[key] || null;

  const getListPersistentDB = makeListPropSelector("persistentDB");
  const getListOptimisticDBActions = makeListPropSelector("optimisticDBActions");
  const getListOptimisticDB = makeOptimisticDBSelector(getListPersistentDB, getListOptimisticDBActions);
  const getListRequests = makeListPropSelector("requests") as (state: RootState) => LevelRequest[] | null;
  const getListFetchState = makeListPropSelector("fetchState");

  return {
    instanceKey,
    getListPersistentDB,
    getListOptimisticDBActions,
    getListOptimisticDB,
    getListFetchState,
    getListItemsCount: createSelector(
      [getListRequests, getListOptimisticDB],
      propagateNull(getDbItemsCount)
    ),
  };
};
export type ListStateSelectors = ReturnType<typeof makeListStateSelectors>;

const [Provider, useContext] = createContext<ListStateSelectors>("ListStateSelectors");

export const ListStateSelectorsProvider: React.FC<React.PropsWithChildren<{instanceKey: string}>> = ({
  instanceKey,
  children,
}) => {
  const listSelectors = useMemo(() => makeListStateSelectors(instanceKey), [instanceKey]);
  return <Provider value={listSelectors}>{children}</Provider>;
};
export const useListStateSelectors = useContext;

Since v5 is out with weakMap cache possibilities what is the suggested way of writing parametriezed selectors? Should we abandon factories? Should we drop all our makeGetSomething = () => createSelector() and just keep createSelector or there is still a use case for them?

Thank you in advance for any tips

[markerikson]

In theory, yeah, most cases where you may have been doing selector factories to account for unique arguments ought to be replaceable with just using createSelector once to create a single selector instance, and using that everywhere instead.

I'm interested in hearing how well that works for you in terms of perf and behavior!

[misha-erm]

we had a long story with selectors) Our app has multi-panel support so a lot of similar components can be rendered on screen but in different contexts. So far we ended up with the approach mentioned above of grouped selector factories and sharing it via react context. It's a super simple solution and has great cache reusability but DX is not the best.

After upgrading to v5 I can see that weakmapMemoize greatly improved performance in places where we still didn't use factories so cache was invalidated after every dispatch to store. Now it remains stable. But in other places performance seems to be almost the same or slightly worse. So thinking about using lru cache in our grouped selectors for now since weak cache doesn't make much sense there

Will try to check metrics after we release it and get back to you with my observations)

Thank you

[misha-erm]

btw, @markerikson do you have maybe any tips on measuring performance of selectors? Is there a way to get some metrics e.g. cache hit ratio or cache size?

[aryaemami59]

I have occasionally used this wrapper function to get a sense of what memoize function is best suited for which situation:

const findFastestSelector = <S extends OutputSelector>(
    selector: S,
    ...selectorArgs: Parameters<S>
  ) => {
    const memoizeFuncs = [lruMemoize, weakMapMemoize, autotrackMemoize]
    const results = memoizeFuncs
      .map(memoize => {
        const alternateSelector = createSelector(
          selector.dependencies as [...SelectorArray],
          selector.resultFunc,
          { memoize }
        )
        const start = performance.now()
        alternateSelector.apply(null, selectorArgs)
        const time = performance.now() - start
        return { name: memoize.name, time, selector: alternateSelector }
      })
      .sort((a, b) => a.time - b.time)
    const fastest = results.reduce((minResult, currentResult) =>
      currentResult.time < minResult.time ? currentResult : minResult
    )
    const ratios = results
      .filter(({ time }) => time !== fastest.time)
      .map(
        ({ time, name }) =>
          `\x1B[33m \x1B[1m${
            time / fastest.time
          }\x1B[0m times faster than \x1B[1;41m${name}\x1B[0m.`
      )
    if (fastest.selector.memoize.name !== selector.memoize.name) {
      console.warn(
        `The memoization method for \x1B[1;41m${
          selector.name
        }\x1B[0m is \x1B[31m${
          selector.memoize.name
        }\x1B[0m!\nChange it to \x1B[32m\x1B[1m${
          fastest.selector.memoize.name
        }\x1B[0m to be more efficient.\nYou should use \x1B[32m\x1B[1m${
          fastest.name
        }\x1B[0m because it is${ratios.join('\nand\n')}`
      )
    }
    return { results, fastest } as const
  }

and then you can just do this:

const selectTodoIds = createSelector(
    [(state: RootState) => state.todos],
    todos => todos.map(({ id }) => id)
  )
  
findFastestSelector(selectTodoIds, state)

[misha-erm]

I've came out with such code

import {
  createSelector as reselectCreateSelector,
} from "reselect";

const getSelectorName = (s) => {
  if (s.dependencies) {
    return s.name + "_" + s.dependencies.map(getSelectorName).join("_");
  }

  return s.name || s.toString();
};

window.selectorMetrics = {};

const createSelector = (...args) => {
  const sel = reselectCreateSelector(...args);

  const name = getSelectorName(sel);
  window.selectorMetrics[name] = {
    dependencyRecomputations: sel.dependencyRecomputations,
    recomputations: sel.recomputations,
    time: 0,
  };

  const profiled = Object.assign(function profiled(...args) {
    const start = performance.now();
    const res = sel(...args);
    window.selectorMetrics[name].time += performance.now() - start;

    return res;
  }, sel);

  return profiled;
};

so at any time I can do this in my console

console.table(
  Object.fromEntries(
    Object.entries(selectorMetrics).map(([key, s]) => [
      key,
      {dependencyRecomputations: s.dependencyRecomputations(), resRecomputations: s.recomputations(), time: s.time},
    ])
  )
);

And see what selectors have most recomputations with their cumulative times