Skip to content

Guide · Open source

How to use Reselect: memoized selectors for Redux

Updated · written with AI from the project's own documentation and checked against our catalogue data

Reselect is a JavaScript library for creating memoized selector functions, which pull or compute data from an app's state. It is commonly used with Redux, though the README notes it works with any plain JavaScript immutable data. This guide shows how to install it, build a memoized selector with createSelector, and know when it is the right tool.

Reselectreduxjs/reselect · ★ 19k · MIT

Quick start

  1. 1Install the package. Run npm install reselect, yarn add reselect or pnpm add reselect in your project. If you use Redux Toolkit, import createSelector from it instead.
  2. 2Define your state shape. Write a TypeScript interface or plain object describing the parts of state you need, such as todos.
  3. 3Write input selectors. Create simple functions that extract values from state, for example state => state.todos.
  4. 4Combine them with createSelector. Pass an array of input selectors and a result function that computes the derived value.
  5. 5Call the selector. Call the output selector as you would any function. It recalculates only when its inputs change.
  6. 6Check the docs for advanced options. Read the API reference at reselect.js.org for createStructuredSelector, development-only checks and custom memoization.

What does Reselect do?

A selector is a function that takes state and returns derived data. Reselect's createSelector creates a memoized selector, which means it remembers its last result and skips recalculation when its inputs have not changed.

According to the README, selectors let Redux store the minimal possible state, because derived data can be computed instead of stored. Selectors are also composable, so one selector can be used as input to another.

  • Selectors can compute derived data, so Redux stores only the minimal state.
  • A selector is not recomputed unless one of its arguments changes.
  • Selectors can be used as input to other selectors.

Install Reselect with npm, Yarn or pnpm

If you use Redux Toolkit, Reselect is already included, so no further installation is needed. Import createSelector from '@reduxjs/toolkit'.

For standalone usage, install the reselect package with the package manager you already use. The README lists Node.js, npm, yarn or pnpm as the prerequisites.

  • npm: npm install reselect
  • Yarn: yarn add reselect
  • pnpm: pnpm add reselect
npm install reselect

Create a memoized selector with createSelector

createSelector takes one or more input selectors, which extract values from the arguments, and a result function, which receives those extracted values and returns a derived value. The resulting output selector only recalculates when the extracted values change.

The example below filters completed todos. The memoized version runs its result function once for repeated calls with the same state, and returns the same array reference each time.

  • Input selectors: functions that extract values, such as state => state.todos.
  • Result function: the last argument, which computes the derived value.
  • Output selector: the memoized function that createSelector returns.
import { createSelector } from 'reselect' const memoizedSelectCompletedTodos = createSelector( [(state: RootState) => state.todos], todos => todos.filter(todo => todo.completed === true) )

Why stable references matter for React-Redux

Reselect returns the existing result reference when there is no recalculation. The README says this matters for libraries like React-Redux or React that rely on reference equality checks to decide whether to update the UI.

A plain function that filters on every call returns a new array each time, so reference checks treat it as changed. The memoized selector avoids that.

Other Reselect features

The API reference in the docs covers createSelector, createSelectorCreator, createStructuredSelector, lruMemoize and weakMapMemoize. The README's 5.0.0 notes describe a default memoization function called weakMapMemoize and development-only checks such as inputStabilityCheck and identityFunctionCheck.

Reselect also supports TypeScript, which is useful if you want typed, composable selectors. Check the docs at reselect.js.org for the full details of each API.

  • createSelector: builds memoized output selectors.
  • createStructuredSelector: builds selectors from an object of input selectors.
  • inputStabilityCheck: warns if input selectors return different results for the same arguments.
  • identityFunctionCheck: checks whether the result function returns its own input.

What people use it for

  • Filtering a list of completed todos from a Redux store without recomputing on every render.
  • Deriving counts or summaries, such as unread alerts, from minimal stored state.
  • Passing stable result references to React-Redux components to avoid unnecessary UI updates.
  • Composing several small selectors into larger ones in a typed TypeScript project.

Frequently asked questions

How do I install reselect?

Run npm install reselect, yarn add reselect or pnpm add reselect, depending on your package manager. If you already use Redux Toolkit, it is included and you do not need to install it separately.

Is reselect free to use?

Reselect is released under the MIT licence, according to the README. The README's licence section says MIT.

Do I need Redux to use reselect?

No. The README says it is commonly used with Redux but works with any plain JavaScript immutable data. The main benefit depends on inputs that stay unchanged between calls.

Does reselect work with TypeScript?

Yes. The project is written in TypeScript and the README describes typed, composable selectors. The README also notes that TypeScript versions below 4.7 are no longer supported.

What are the alternatives to reselect?

Projects listed as comparable include Redux Toolkit, re-select and proxy-memoize. Redux Toolkit already includes Reselect's createSelector, so it is often the simplest choice for Redux users.

Why does my selector still recalculate?

A selector recalculates when any of its input values change by reference. If an input selector returns a new object or array on every call, the output selector will recalculate. The inputStabilityCheck development tool can warn you about input selectors that return differing results for the same arguments.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

Reselect suits Redux users, React-Redux developers and TypeScript projects that want memoized, composable selectors with stable result references. It is a poor fit for code that does not use Redux or immutable-style data, and beginners should learn Redux basics first.

Install options & downloads