Boost React + Redux Performance with Reselect

When working with React and Redux, efficient state selection is key for high performance. Reselect is a library that helps create memoized selectors, which optimize state selection by reducing unnecessary re-renders.

Selectors are functions that pick a slice of state from the Redux store. They help separate your state logic from your components, keeping things cleaner and more maintainable.

Here’s a basic example of a Redux state:

1
const initialState = {
2
  data: [
3
    { name: "Milton", type: "cat", age: 4 },
4
    { name: "Sammy", type: "dog", age: 2 },
5
    { name: "Joseph", type: "turtle", age: 34 },
6
    { name: "Simon", type: "dog", age: 8 }
7
  ]
8
};

Without selectors, you might directly filter the state inside a component, which could cause performance issues when repeated multiple times.

1
const dogs = useSelector(state =>
2
  state.data.filter(animal => animal.type === 'dog')
3
);

Looks fine, right? The problem is, every time your component re-renders, this filter operation runs again. As your app grows, this can make things slow and difficult to manage. This is where Reselect shines.

Installing Reselect

You can install Reselect with just one command:

1
yarn add reselect

Once installed, you can start using it to create memoized selectors that will only recalculate when the input state changes.

Building Your First Selector

Reselect provides the createSelector function, which lets you build memoized selectors easily. The basic idea is simple: the last argument is a function that selects data, while the previous arguments are input selectors.

Let’s create a selector to get all pets and another one to filter out the dogs.

1
import { createSelector } from 'reselect';
2

3
const selectAllPets = state => state.data;
4

5
export const selectAllDogs = createSelector(
6
  selectAllPets,
7
  allPets => allPets.filter(animal => animal.type === 'dog')
8
);

Here, selectAllPets is the input selector, and the second argument is the filter function. The result will only be recalculated if the list of pets changes.

Using the Selector in Your Component

Now that we have our memoized selector, let’s use it in a React component.

1
import { useSelector } from 'react-redux';
2
import { selectAllDogs } from './selectors';
3

4
const PetsContainer = () => {
5
  const dogs = useSelector(selectAllDogs);
6

7
  return (
8
    <div>
9
      <h1>Dogs</h1>
10
      <ul>
11
        {dogs.map(dog => (
12
          <li key={dog.name}>{dog.name} - {dog.age} years old</li>
13
        ))}
14
      </ul>
15
    </div>
16
  );
17
};

With this approach, you are no longer recalculating the list of dogs on every render. The selector is memoized, meaning it remembers the result and only recalculates when necessary, improving performance.

Why Reselect is Powerful

• Memoization: Selectors don’t recalculate unless one of their inputs changes. This cuts down on unnecessary computations, improving performance.
• Composability: You can build selectors on top of other selectors. This makes your state logic cleaner and easier to manage.
• Efficiency: By keeping your components focused on rendering and moving logic to selectors, you reduce component complexity and make your app more maintainable.

Combining Selectors

You can also compose selectors to pick different parts of your state. Let’s say we want to select both dogs and cats. We can create separate selectors and combine them:

1
export const selectAllCats = createSelector(
2
  selectAllPets,
3
  allPets => allPets.filter(animal => animal.type === 'cat')
4
);
5

6
export const selectAllDogsAndCats = createSelector(
7
  selectAllDogs,
8
  selectAllCats,
9
  (dogs, cats) => [...dogs, ...cats]
10
);

Here, selectAllDogsAndCats takes the results of the selectAllDogs and selectAllCats selectors and combines them into a single array. You can then use it in your component just like before:

1
const PetsContainer = () => {
2
  const dogsAndCats = useSelector(selectAllDogsAndCats);
3

4
  return (
5
    <div>
6
      <h1>Dogs and Cats</h1>
7
      <ul>
8
        {dogsAndCats.map(pet => (
9
          <li key={pet.name}>{pet.name} - {pet.age} years old</li>
10
        ))}
11
      </ul>
12
    </div>
13
  );
14
};

Memoization in Action

Reselect uses memoization to optimize performance. Once a selector calculates a result, it stores the result in memory. If the inputs don’t change, it returns the same result without recalculating.

Let’s say you update the state with a new pet:

1
dispatch({
2
  type: 'ADD_PET',
3
  payload: { name: "Charlie", type: "dog", age: 5 }
4
});

Only then will the selectAllDogs selector recalculate the list of dogs, because the state has changed. If nothing changes, it returns the memoized result, keeping your app snappy.

Selectors are a critical part of optimizing your React + Redux application, and Reselect makes it incredibly easy to create memoized selectors that improve performance. By moving state selection logic out of components and into memoized selectors, you reduce unnecessary recalculations, making your app faster and more maintainable.