Reselect Library

Definition

A standalone library for creating memoized selector functions. It was historically a separate install, but is now bundled directly into Redux Toolkit.

Explain Like I'm New

The engine powering `createSelector`. It allows you to compose multiple selectors together. You can pass the output of 3 different selectors into a final calculator function, and it perfectly manages the cache for all of them.

Real World Example

Creating a `selectTaxRate` and `selectCartTotal` selector, and piping them both into a `selectFinalPrice` memoized selector.

Common Use Cases

•Composing complex derived state pipelines

Interactive Example

import { createSelector } from '@reduxjs/toolkit';

const selectSubtotal = state => state.cart.subtotal;
const selectTaxPercent = state => state.cart.taxPercent;

// Reselect allows you to chain selectors together indefinitely
export const selectTotalWithTax = createSelector(
  [selectSubtotal, selectTaxPercent],
  (subtotal, taxPercent) => {
    return subtotal + (subtotal * (taxPercent / 100));
  }
);

Interview Questions

basic

Do you need to `npm install reselect` in a modern RTK project?

intermediate

What is the 'Cache Size' of a standard `createSelector` function by default?

Flash Cards

Question

Install it?

Click to reveal answer

Answer

No. RTK re-exports `createSelector` directly from `@reduxjs/toolkit`.

Question

Cache size?

Click to reveal answer

Answer

By default, Reselect only has a cache size of 1. It only remembers the VERY LAST execution. If it alternates between two different inputs repeatedly, it will recalculate every time.