re-reselect
Advanced tools
The re-reselect npm package is an extension of the reselect library, which is used for creating memoized selectors in Redux. re-reselect adds the ability to cache selectors based on dynamic keys, which can help optimize performance in applications with complex state trees.
Dynamic Key-Based Caching
This feature allows you to create selectors that cache their results based on dynamic keys. In this example, the selector caches results based on the item ID, which can improve performance by avoiding unnecessary recalculations.
const createCachedSelector = require('re-reselect').default;
const inputSelector = state => state.items;
const idSelector = (state, id) => id;
const cachedSelector = createCachedSelector(
inputSelector,
idSelector,
(items, id) => items.find(item => item.id === id)
)(idSelector);
const state = { items: [{ id: 1, name: 'Item 1' }, { id: 2, name: 'Item 2' }] };
console.log(cachedSelector(state, 1)); // { id: 1, name: 'Item 1' }Custom Cache Management
This feature allows you to use custom cache management strategies. In this example, an LRU (Least Recently Used) cache is used to manage the cached selectors, which can help in scenarios where memory usage needs to be controlled.
const createCachedSelector = require('re-reselect').default;
const LRU = require('lru-cache');
const cache = new LRU({ max: 100 });
const inputSelector = state => state.items;
const idSelector = (state, id) => id;
const cachedSelector = createCachedSelector(
inputSelector,
idSelector,
(items, id) => items.find(item => item.id === id)
)({ cacheObject: cache });
const state = { items: [{ id: 1, name: 'Item 1' }, { id: 2, name: 'Item 2' }] };
console.log(cachedSelector(state, 1)); // { id: 1, name: 'Item 1' }Composite Key Selectors
This feature allows you to create selectors that use composite keys for caching. In this example, the selector caches results based on a combination of item ID and type, which can be useful for more complex state structures.
const createCachedSelector = require('re-reselect').default;
const inputSelector = state => state.items;
const compositeKeySelector = (state, id, type) => `${id}-${type}`;
const cachedSelector = createCachedSelector(
inputSelector,
compositeKeySelector,
(items, key) => items.find(item => `${item.id}-${item.type}` === key)
)(compositeKeySelector);
const state = { items: [{ id: 1, type: 'A', name: 'Item 1' }, { id: 2, type: 'B', name: 'Item 2' }] };
console.log(cachedSelector(state, 1, 'A')); // { id: 1, type: 'A', name: 'Item 1' }Reselect is a simple library for creating memoized selectors in Redux. It does not support dynamic key-based caching like re-reselect, but it is a foundational library that re-reselect builds upon. Reselect is useful for creating selectors that are memoized based on their input arguments.
Memoize-one is a library that memoizes the most recent result of a function. It is simpler than re-reselect and does not support dynamic key-based caching. It is useful for scenarios where you only need to cache the last result of a function call.
Re-reselect is an extension of reselect that adds dynamic key-based caching. It is more powerful than reselect and memoize-one for scenarios where you need to cache results based on dynamic keys.
re-reselect is a lightweight wrapper around Reselect meant to enhance selectors with deeper memoization and cache management.
Switching between different arguments using standard reselect selectors causes cache invalidation since default reselect cache has a limit of one.
re-reselect forwards different calls to different reselect selectors stored in cache, so that computed/memoized values are retained.
re-reselect selectors work as normal reselect selectors but they are able to determine when creating a new selector or querying a cached one on the fly, depending on the supplied arguments.
Useful to:
reselect with custom caching strategiesimport {createCachedSelector} from 're-reselect';
// Normal reselect routine: declare "inputSelectors" and "resultFunc"
const getUsers = state => state.users;
const getLibraryId = (state, libraryName) => state.libraries[libraryName].id;
const getUsersByLibrary = createCachedSelector(
// inputSelectors
getUsers,
getLibraryId,
// resultFunc
(users, libraryId) => expensiveComputation(users, libraryId),
)(
// re-reselect keySelector (receives selectors' arguments)
// Use "libraryName" as cacheKey
(_state_, libraryName) => libraryName
);
// Cached selectors behave like normal selectors:
// 2 reselect selectors are created, called and cached
const reactUsers = getUsersByLibrary(state, 'react');
const vueUsers = getUsersByLibrary(state, 'vue');
// This 3rd call hits the cache
const reactUsersAgain = getUsersByLibrary(state, 'react');
// reactUsers === reactUsersAgain
// "expensiveComputation" called twice in total
npm install reselect -S
npm install re-reselect -S
Let's say getData is a reselect selector.
getData(state, itemId, 'dataA');
getData(state, itemId, 'dataB');
getData(state, itemId, 'dataA');
The 3rd argument invalidates reselect cache on each call, forcing getData to re-evaluate and return a new value.
re-reselect selectors keep a cache of reselect selectors stored by cacheKey.
cacheKey is the return value of the keySelector function. It's by default a string or number but it can be anything depending on the chosen cache strategy (see cache objects docs).
keySelector is a custom function which:
state, itemId, dataType)cacheKeyA unique persisting reselect selector instance stored in cache is used to compute data for a given cacheKey (1:1).
Back to the example, we might setup re-reselect to retrieve data by querying one of the cached selectors using the 3rd argument as cacheKey, allowing cache invalidation only when state or itemId change (but not dataType):
const getData = createCachedSelector(
state => state,
(state, itemId) => itemId,
(state, itemId, dataType) => dataType,
(state, itemId, dataType) => expensiveComputation(state, itemId, dataType)
)(
(state, itemId, dataType) => dataType // Use dataType as cacheKey
);
Replacing a selector with a cached selector is invisible to the consuming application since the API is the same.
When a cached selector is called, the following happens behind the scenes:
cacheKey for the current call by executing keySelectorreselect selector stored under the given cacheKeyEasy, but doesn't scale. See "join similar selectors" example.
makeGetPieceOfData selector factory as explained in Reselect docsThe solution suggested in Reselect docs is fine, but it has a few downsides:
get selectors and makeGet selector factoriesmakeGetPieceOfData selector factory into a memoizer function and call the returning memoized selectorThis is what re-reselect actually does. 😀
Given your reselect selectors:
import {createSelector} from 'reselect';
export const getMyData = createSelector(
selectorA,
selectorB,
selectorC,
(A, B, C) => doSomethingWith(A, B, C)
);
...add keySelector in the second function call:
import {createCachedSelector} from 're-reselect';
export const getMyData = createCachedSelector(
selectorA,
selectorB,
selectorC,
(A, B, C) => doSomethingWith(A, B, C)
)(
(state, arg1, arg2) => arg2 // Use arg2 as cacheKey
);
Voilà, getMyData is ready for use!
const myData = getMyData(state, 'foo', 'bar');
A few good examples and a bonus:
// Basic usage: use a single argument as cacheKey
createCachedSelector(
// ...
)(
(state, arg1, arg2, arg3) => arg3
)
// Use multiple arguments and chain them into a string
createCachedSelector(
// ...
)(
(state, arg1, arg2, arg3) => `${arg1}:${arg3}`
)
// Extract properties from an object
createCachedSelector(
// ...
)(
(state, props) => `${props.a}:${props.b}`
)
Use a cacheObject which provides that feature by supplying a cacheObject option.
You can also write your own cache strategy!
This example shows how re-reselect would solve the scenario described in reselect docs.
Like a normal reselect selector!
re-reselect selectors expose the same reselect testing methods:
dependenciesresultFuncrecomputationsresetRecomputationsRead more about testing selectors on reselect docs.
reselect selectors stored in the cacheEach re-reselect selector exposes a getMatchingSelector method which returns the underlying matching selector instance for the given arguments, instead of the result.
getMatchingSelector expects the same arguments as a normal selector call BUT returns the instance of the cached selector itself.
Once you get a selector instance you can call its public methods.
import {createCachedSelector} from 're-reselect';
export const getMyData = createCachedSelector(selectorA, selectorB, (A, B) =>
doSomethingWith(A, B)
)(
(state, arg1) => arg1 // cacheKey
);
// Call your selector
const myFooData = getMyData(state, 'foo');
const myBarData = getMyData(state, 'bar');
// Call getMatchingSelector method to retrieve underlying reselect selectors
// which generated "myFooData" and "myBarData" results
const myFooDataSelector = getMyData.getMatchingSelector(state, 'foo');
const myBarDataSelector = getMyData.getMatchingSelector(state, 'bar');
// Call reselect's selectors methods
myFooDataSelector.recomputations();
myFooDataSelector.resetRecomputations();
import {createCachedSelector} from 're-reselect';
createCachedSelector(
// ...reselect's `createSelector` arguments
)(
keySelector | { options }
)
Takes the same arguments as reselect's createSelector and returns a new function which accepts a keySelector or an options object.
Returns a selector instance.
import {createStructuredCachedSelector} from 're-reselect';
createStructuredCachedSelector(
// ...reselect's `createStructuredSelector` arguments
)(
keySelector | { options }
)
Takes the same arguments as reselect's createStructuredSelector and returns a new function which accepts a keySelector or an options object.
Returns a selector instance.
A custom function receiving the same arguments as your selectors (and inputSelectors) and returning a cacheKey.
cacheKey is by default a string or number but can be anything depending on the chosen cache strategy (see cacheObject option).
The keySelector idea comes from Lodash's .memoize resolver.
Type: function
Default: undefined
The keySelector used by the cached selector.
Type: object
Default: FlatObjectCache
An optional custom cache strategy object to handle the caching behaviour. Read more about re-reselect's custom cache here.
Type: function
Default: undefined
An optional function with the following signature returning the keySelector used by the cached selector.
type keySelectorCreator = (selectorInputs: {
inputSelectors: InputSelector[];
resultFunc: ResultFunc;
keySelector: KeySelector;
}) => KeySelector;
This allows the ability to dynamically generate keySelectors on runtime based on provided inputSelectors/resultFunc supporting key selectors composition. It overrides any provided keySelector.
See programmatic keySelector composition example.
Type: function
Default: reselect's createSelector
An optional function describing a custom version of createSelector.
createCachedSelector and createStructuredCachedSelector return a selector instance which extends the API of a standard reselect selector.
The followings are advanced methods and you won't need them for basic usage!
.getMatchingSelector(selectorArguments)Retrieve the selector responding to the given arguments.
.removeMatchingSelector(selectorArguments)Remove from the cache the selector responding to the given arguments.
.cacheGet the cacheObject instance being used by the selector (for advanced caching operations like this).
.clearCache()Clear whole selector cache.
.dependenciesGet an array containing the provided inputSelectors. Refer to relevant discussion on Reselect repo.
.resultFuncGet resultFunc for easily testing composed selectors.
.recomputations()Return the number of times the selector's result function has been recomputed.
.resetRecomputations()Reset recomputations count.
.keySelectorGet keySelector for utility compositions or testing.
Thanks to you all (emoji key):
4.0.1
clearCache from CreateSelectorInstance typeFAQs
Enhance Reselect selectors with deeper memoization and cache management
The npm package re-reselect receives a total of 84,444 weekly downloads. As such, re-reselect popularity was classified as popular.
We found that re-reselect demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
In 2023, data breaches surged 78% from zero-day and supply chain attacks, but developers are still buried under alerts that are unable to prevent these threats.
Security News
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
Security News
License exceptions modify the terms of open source licenses, impacting how software can be used, modified, and distributed. Developers should be aware of the legal implications of these exceptions.