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
- JavaScript
const referenceEqualityCheck = (previousValue: any, currentValue: any) => {
return previousValue === currentValue
}
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 |
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
- JavaScript
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,
},
},
)
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
- JavaScript
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),
)
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),
)