reselect README

The project's README from github.com/reduxjs/reselect. As one markdown file: README.md.

Reselect

npm packageCoverallsGitHub Workflow StatusTypeScript

A library for creating memoized "selector" functions. Commonly used with Redux, but usable with any plain JS immutable data as well.

The Redux docs usage page on Deriving Data with Selectors covers the purpose and motivation for selectors, why memoized selectors are useful, typical Reselect usage patterns, and using selectors with React-Redux.

Installation

Redux Toolkit

While Reselect is not exclusive to Redux, it is already included by default in the official Redux Toolkit package - no further installation needed.

import { createSelector } from '@reduxjs/toolkit'

Standalone

For standalone usage, install the reselect package:

# NPM
npm install reselect

# Yarn
yarn add reselect

# pnpm
pnpm add reselect

Documentation

The Reselect docs are available at https://reselect.js.org, and include usage guides and API references:

Basic Usage

Reselect exports a createSelector API, which generates memoized selector functions. createSelector accepts one or more input selectors, which extract values from arguments, and a result function function that receives the extracted values and should return a derived value. If the generated output selector is called multiple times, the output will only be recalculated when the extracted values have changed.

You can play around with the following example in this CodeSandbox:

import { createSelector } from 'reselect'

interface RootState {
  todos: { id: number; completed: boolean }[]
  alerts: { id: number; read: boolean }[]
}

const state: RootState = {
  todos: [
    { id: 0, completed: false },
    { id: 1, completed: true }
  ],
  alerts: [
    { id: 0, read: false },
    { id: 1, read: true }
  ]
}

const selectCompletedTodos = (state: RootState) => {
  console.log('selector ran')
  return state.todos.filter(todo => todo.completed === true)
}

selectCompletedTodos(state) // selector ran
selectCompletedTodos(state) // selector ran
selectCompletedTodos(state) // selector ran

const memoizedSelectCompletedTodos = createSelector(
  [(state: RootState) => state.todos],
  todos => {
    console.log('memoized selector ran')
    return todos.filter(todo => todo.completed === true)
  }
)

memoizedSelectCompletedTodos(state) // memoized selector ran
memoizedSelectCompletedTodos(state)
memoizedSelectCompletedTodos(state)

console.log(selectCompletedTodos(state) === selectCompletedTodos(state)) //=> false

console.log(
  memoizedSelectCompletedTodos(state) === memoizedSelectCompletedTodos(state)
) //=> true

As you can see from the example above, memoizedSelectCompletedTodos does not run the second or third time, but we still get the same return value as last time.

In addition to skipping unnecessary recalculations, memoizedSelectCompletedTodos returns the existing result reference if there is no recalculation. This is important for libraries like React-Redux or React that often rely on reference equality checks to optimize UI updates.

Terminology

The below example serves as a visual aid:

const outputSelector = createSelector(
  [inputSelector1, inputSelector2, inputSelector3], // synonymous with `dependencies`.
  resultFunc // Result function
)

What's New in 5.0.0?

Version 5.0.0 introduces several new features and improvements:

These updates aim to enhance flexibility, performance, and developer experience. For detailed usage and examples, refer to the updated documentation sections for each feature.

[ ↑ Back to top ↑ ]

License

MIT

References

Click to Expand

Originally inspired by getters in NuclearJS, subscriptions in re-frame and this proposal from speedskater.

reselect (reduxjs/reselect)

redux
Searching Database…

19K ·GitHub
Reselect
What is this?A small library for creating memoized selector functions that derive computed data from your state. Best known with Redux, where it lets the store keep the minimal possible state, but it works with any plain JS immutable data too.
Is it tied to Redux, or can I use it with any state?It's a plain npm package with no Redux dependency — selectors work with any plain JS immutable data. Redux Toolkit already bundles it by default, so RTK users need no extra install.
How do I add it to a project?If you use Redux Toolkit, nothing to do — it's included. Otherwise add the standalone package: npm install reselect. The official docs site has usage guides and the full API reference.
How do I catch common selector mistakes?Reselect ships development-only checks: inputStabilityCheck runs the input selectors twice and warns if the same call returns different results, while identityFunctionCheck flags result functions that just return their own input. dependencyRecomputations tracks input recalculations.
Why does it matter that a selector returns the same object reference?React and React-Redux optimize updates with reference equality checks. Because a memoized selector hands back the existing result reference when nothing changed, connected components skip needless re-renders instead of updating on every store event.
What's new in version 5.0.0?v5 made weakMapMemoize the default memoizer, requires TypeScript 4.7 or newer, and removed the ParametricSelector types plus createStructuredSelector's second overload. TypeScript performance improved a lot: you can nest around 30 output selectors instead of roughly 8 before hitting the deep type-instantiation error.
Where did the idea for Reselect come from?The README credits getters in NuclearJS, subscriptions in re-frame, and a proposal from speedskater as the original inspirations.
What are similar projects?redux-form, zustand, react-redux, nuqs, immer, TypeScript-React-Starter, normalizr, redux
Which topics is it in?composable, redux, state-management, npm-package, caching, utility, developers, web-development, performance, react, npm, frontend
Creator
reduxjs
Size
7.6 MB
Stars
19K
Updated
CommitSep 30Releasev5.3.0Aug 22
Age
11y
Commits · 90 Days