Add benchmarks to test different memoization methods

src/types.ts

@@ -464,7 +464,7 @@ export type FunctionType<T> = Extract<T, AnyFunction>
  */
 export type ExtractReturnType<FunctionsArray extends readonly AnyFunction[]> = {
  [Index in keyof FunctionsArray]: FunctionsArray[Index] extends FunctionsArray[number]
- ? FallbackIfUnknown<ReturnType<FunctionsArray[Index]>, any>
+ ? FallbackIfUnknown<FallbackIfUnknown<ReturnType<FunctionsArray[Index]>, any>, any>
  : never
 }
 

test/benchmarks/orderOfExecution.bench.ts

@@ -0,0 +1,213 @@
+import type { OutputSelector, Selector } from 'reselect'
+import { createSelector, defaultMemoize } from 'reselect'
+import type { Options } from 'tinybench'
+import { bench } from 'vitest'
+import type { RootState } from '../testUtils'
+import {
+ countRecomputations,
+ expensiveComputation,
+ logFunctionInfo,
+ logSelectorRecomputations,
+ resetSelector,
+ runMultipleTimes,
+ setFunctionNames,
+ setupStore,
+ toggleCompleted,
+ toggleRead
+} from '../testUtils'
+
+describe('Less vs more computation in input selectors', () => {
+ const store = setupStore()
+ const runSelector = (selector: Selector) => {
+ runMultipleTimes(selector, 100, store.getState())
+ }
+ const selectorLessInInput = createSelector(
+ [(state: RootState) => state.todos],
+ todos => {
+ expensiveComputation()
+ return todos.filter(todo => todo.completed)
+ }
+ )
+ const selectorMoreInInput = createSelector(
+ [
+ (state: RootState) => {
+ expensiveComputation()
+ return state.todos
+ }
+ ],
+ todos => todos.filter(todo => todo.completed)
+ )
+
+ const nonMemoized = countRecomputations((state: RootState) => {
+ expensiveComputation()
+ return state.todos.filter(todo => todo.completed)
+ })
+ const commonOptions: Options = {
+ iterations: 10,
+ time: 0
+ }
+ setFunctionNames({ selectorLessInInput, selectorMoreInInput, nonMemoized })
+ const createOptions = <S extends OutputSelector>(
+ selector: S,
+ commonOptions: Options = {}
+ ) => {
+ const options: Options = {
+ setup: (task, mode) => {
+ if (mode === 'warmup') return
+ task.opts = {
+ beforeEach: () => {
+ store.dispatch(toggleRead(1))
+ },
+ afterAll: () => {
+ logSelectorRecomputations(selector)
+ }
+ }
+ }
+ }
+ return { ...commonOptions, ...options }
+ }
+ bench(
+ selectorLessInInput,
+ () => {
+ runSelector(selectorLessInInput)
+ },
+ createOptions(selectorLessInInput, commonOptions)
+ )
+ bench(
+ selectorMoreInInput,
+ () => {
+ runSelector(selectorMoreInInput)
+ },
+ createOptions(selectorMoreInInput, commonOptions)
+ )
+ bench(
+ nonMemoized,
+ () => {
+ runSelector(nonMemoized)
+ },
+ {
+ ...commonOptions,
+ setup: (task, mode) => {
+ if (mode === 'warmup') return
+ nonMemoized.resetRecomputations()
+ task.opts = {
+ beforeEach: () => {
+ store.dispatch(toggleCompleted(1))
+ },
+ afterAll: () => {
+ logFunctionInfo(nonMemoized, nonMemoized.recomputations())
+ }
+ }
+ }
+ }
+ )
+})
+
+// This benchmark is made to test to see at what point it becomes beneficial
+// to use reselect to memoize a function that is a plain field accessor.
+describe('Reselect vs standalone memoization for field access', () => {
+ const store = setupStore()
+ const runSelector = (selector: Selector) => {
+ runMultipleTimes(selector, 1_000_000, store.getState())
+ }
+ const commonOptions: Options = {
+ // warmupIterations: 0,
+ // warmupTime: 0,
+ // iterations: 10,
+ // time: 0
+ }
+ const fieldAccessorWithReselect = createSelector(
+ [(state: RootState) => state.users],
+ users => users.appSettings
+ )
+ const fieldAccessorWithMemoize = countRecomputations(
+ defaultMemoize((state: RootState) => {
+ return state.users.appSettings
+ })
+ )
+ const nonMemoizedAccessor = countRecomputations(
+ (state: RootState) => state.users.appSettings
+ )
+
+ setFunctionNames({
+ fieldAccessorWithReselect,
+ fieldAccessorWithMemoize,
+ nonMemoizedAccessor
+ })
+ const createOptions = <S extends OutputSelector>(
+ selector: S,
+ commonOptions: Options = {}
+ ) => {
+ const options: Options = {
+ setup: (task, mode) => {
+ if (mode === 'warmup') return
+ resetSelector(selector)
+ task.opts = {
+ beforeEach: () => {
+ store.dispatch(toggleCompleted(1))
+ },
+ afterAll: () => {
+ logSelectorRecomputations(selector)
+ }
+ }
+ }
+ }
+ return { ...commonOptions, ...options }
+ }
+ bench(
+ fieldAccessorWithReselect,
+ () => {
+ runSelector(fieldAccessorWithReselect)
+ },
+ createOptions(fieldAccessorWithReselect, commonOptions)
+ )
+ bench(
+ fieldAccessorWithMemoize,
+ () => {
+ runSelector(fieldAccessorWithMemoize)
+ },
+ {
+ ...commonOptions,
+ setup: (task, mode) => {
+ if (mode === 'warmup') return
+ fieldAccessorWithMemoize.resetRecomputations()
+ fieldAccessorWithMemoize.clearCache()
+ task.opts = {
+ beforeEach: () => {
+ store.dispatch(toggleCompleted(1))
+ },
+ afterAll: () => {
+ logFunctionInfo(
+ fieldAccessorWithMemoize,
+ fieldAccessorWithMemoize.recomputations()
+ )
+ }
+ }
+ }
+ }
+ )
+ bench(
+ nonMemoizedAccessor,
+ () => {
+ runSelector(nonMemoizedAccessor)
+ },
+ {
+ ...commonOptions,
+ setup: (task, mode) => {
+ if (mode === 'warmup') return
+ nonMemoizedAccessor.resetRecomputations()
+ task.opts = {
+ beforeEach: () => {
+ store.dispatch(toggleCompleted(1))
+ },
+ afterAll: () => {
+ logFunctionInfo(
+ nonMemoizedAccessor,
+ nonMemoizedAccessor.recomputations()
+ )
+ }
+ }
+ }
+ }
+ )
+})