lruMemoize

A memoization function that uses a provided equality check function to compare its inputs. This was originally known as defaultMemoize, and was the default inside of createSelector up through version 4.x.

It has a default cache size of 1. This means it always recalculates when the value of an argument changes. However, this can be customized as needed with a specific max cache size (since 4.1.0).

It determines if an argument has changed by calling the equalityCheck function. As lruMemoize is designed to be used with immutable data, the default equalityCheck function checks for changes using reference equality:

TypeScript

lruMemoize/referenceEqualityCheck.ts

const referenceEqualityCheck = (previousValue: any, currentValue: any) => {
  return previousValue === currentValue
}

JavaScript

lruMemoize/referenceEqualityCheck.js

const referenceEqualityCheck = (previousValue, currentValue) => {
  return previousValue === currentValue
}

Parameters

Name	Description
func	The function to be memoized.
equalityCheckOrOptions	Either an equality check function or an options object.

Since 4.1.0, lruMemoize also accepts an options object as its first argument instead of an equalityCheck function. The options object may contain:

type EqualityFn<T = any> = (a: T, b: T) => boolean

interface LruMemoizeOptions<Result = any> {
  equalityCheck?: EqualityFn
  resultEqualityCheck?: EqualityFn<Result>
  maxSize?: number
}

Name	Description
equalityCheck	Used to compare the individual arguments of the provided calculation function. Default = defaultEqualityCheck
resultEqualityCheck	If provided, used to compare a newly generated output value against previous values in the cache. If a match is found, the old value is returned. This addresses the common todos.map(todo => todo.id) use case, where an update to another field in the original data causes a recalculation due to changed references, but the output is still effectively the same.
maxSize	The cache size for the selector. If greater than 1, the selector will use an LRU cache internally. Default = 1

warning

If resultEqualityCheck is used inside argsMemoizeOptions it has no effect.

Returns

A memoized function with a .clearCache() method attached.

Type Parameters

Name	Description
Func	The type of the function that is memoized.

Examples

Using lruMemoize with createSelector

TypeScript

lruMemoize/usingWithCreateSelector.ts

import { shallowEqual } from 'react-redux'
import { createSelector, lruMemoize } from 'reselect'

export interface RootState {
  todos: {
    id: number
    completed: boolean
    title: string
    description: string
  }[]
  alerts: { id: number; read: boolean }[]
}

const selectTodoIds = createSelector(
  [(state: RootState) => state.todos],
  todos => todos.map(todo => todo.id),
  {
    memoize: lruMemoize,
    memoizeOptions: {
      equalityCheck: shallowEqual,
      resultEqualityCheck: shallowEqual,
      maxSize: 10
    },
    argsMemoize: lruMemoize,
    argsMemoizeOptions: {
      equalityCheck: shallowEqual,
      resultEqualityCheck: shallowEqual,
      maxSize: 10
    }
  }
)

JavaScript

lruMemoize/usingWithCreateSelector.js

import { shallowEqual } from 'react-redux'
import { createSelector, lruMemoize } from 'reselect'

const selectTodoIds = createSelector(
  [state => state.todos],
  todos => todos.map(todo => todo.id),
  {
    memoize: lruMemoize,
    memoizeOptions: {
      equalityCheck: shallowEqual,
      resultEqualityCheck: shallowEqual,
      maxSize: 10
    },
    argsMemoize: lruMemoize,
    argsMemoizeOptions: {
      equalityCheck: shallowEqual,
      resultEqualityCheck: shallowEqual,
      maxSize: 10
    }
  }
)

Using lruMemoize with createSelectorCreator

TypeScript

lruMemoize/usingWithCreateSelectorCreator.ts

import { shallowEqual } from 'react-redux'
import { createSelectorCreator, lruMemoize } from 'reselect'

export interface RootState {
  todos: {
    id: number
    completed: boolean
    title: string
    description: string
  }[]
  alerts: { id: number; read: boolean }[]
}

const createSelectorShallowEqual = createSelectorCreator({
  memoize: lruMemoize,
  memoizeOptions: {
    equalityCheck: shallowEqual,
    resultEqualityCheck: shallowEqual,
    maxSize: 10
  },
  argsMemoize: lruMemoize,
  argsMemoizeOptions: {
    equalityCheck: shallowEqual,
    resultEqualityCheck: shallowEqual,
    maxSize: 10
  }
})

const selectTodoIds = createSelectorShallowEqual(
  [(state: RootState) => state.todos],
  todos => todos.map(todo => todo.id)
)

JavaScript

lruMemoize/usingWithCreateSelectorCreator.js

import { shallowEqual } from 'react-redux'
import { createSelectorCreator, lruMemoize } from 'reselect'

const createSelectorShallowEqual = createSelectorCreator({
  memoize: lruMemoize,
  memoizeOptions: {
    equalityCheck: shallowEqual,
    resultEqualityCheck: shallowEqual,
    maxSize: 10
  },
  argsMemoize: lruMemoize,
  argsMemoizeOptions: {
    equalityCheck: shallowEqual,
    resultEqualityCheck: shallowEqual,
    maxSize: 10
  }
})

const selectTodoIds = createSelectorShallowEqual(
  [state => state.todos],
  todos => todos.map(todo => todo.id)
)