Reselect

Reselect is a small library for creating memoized, composable selectors intended for use with Redux and other state containers. A selector is a function that reads a piece of state and computes derived data. Reselect optimizes this by caching the result of a selector and recomputing only when its input selectors report changed inputs.

At its core, createSelector takes one or more input selectors and a final result function. When invoked, it calls each input selector to gather their values, then passes those values to the result function to compute the derived data. Reselect remembers the last inputs and the last output. If the next call has the same inputs (by strict equality), it returns the cached result, avoiding unnecessary work.

Composition is straightforward: input selectors can themselves be created with createSelector, enabling complex, memoized data pipelines. This makes it easy to build derived data graphs where each step is memoized and only recomputed when its own inputs change.

Customization is supported through createSelectorCreator, which allows replacing the default memoization strategy with a custom one (for example, to alter cache size or equality checks). This enables more advanced caching schemes beyond the default single-set of last inputs.

Use cases include deriving filtered or sorted views from a state tree, computing aggregates, or applying search queries to lists, all while avoiding re-computation when relevant state slices remain unchanged. A common pitfall is reliance on mutable objects; since reselect’s memoization is based on referential equality, using immutable data structures helps ensure correctness.

Example (conceptual): const selectVisibleTodos = createSelector(selectTodos, selectFilter, (todos, filter) => { /* derive filtered list */ }); This produces a new derived value only when the inputs change.