Redux Question: When <App/> Component re-renders, does it cause all selectors to run again?

Are you tired of dealing with the intricacies of Redux and React? Well, you’re in luck! In this article, we’re going to dive deep into the world of Redux and explore one of its most misunderstood aspects: selectors. Specifically, we’re going to answer the question: when the `` component re-renders, does it cause all selectors to run again?

What are Selectors?

Before we dive into the meat of the question, let’s take a quick detour to understand what selectors are in Redux. Selectors are functions that take the entire Redux state as an argument and return a slice of that state. They’re essentially a way to extract specific data from the Redux store, which can then be used in your React components.

const selectUser = state => state.user;

In the example above, the `selectUser` selector takes the entire Redux state as an argument and returns only the `user` slice of that state.

How do Selectors Work?

Now that we know what selectors are, let’s talk about how they work. When you connect a React component to the Redux store using `connect`, you pass in a function that defines the props that should be passed to the component. This function is called whenever the Redux state changes, and it’s responsible for returning the new props.

import { connect } from 'react-redux';

const mapStateToProps = state => ({
  user: selectUser(state),
});

const ConnectedComponent = connect(mapStateToProps)(MyComponent);

In the example above, the `mapStateToProps` function is called whenever the Redux state changes. It uses the `selectUser` selector to extract the `user` slice from the state, and then returns a new props object with the `user` property.

The Problem: When <App/> Re-renders, do all Selectors Run Again?

So, what happens when the `` component re-renders? Does it cause all selectors to run again? The answer is… it depends!

Cases where Selectors Run Again

There are certain scenarios where a re-render of the `` component can cause all selectors to run again. Here are a few examples:

• If the entire Redux state changes, all selectors will run again. This is because the `mapStateToProps` function is re-run whenever the state changes, and it will re-compute the props for the connected component.

• If the component’s props change, the `mapStateToProps` function will be re-run, which means all selectors will run again.

• If the component’s context changes, the `mapStateToProps` function may be re-run, depending on how the context is used.

Cases where Selectors Don’t Run Again

There are also scenarios where a re-render of the `` component won’t cause all selectors to run again. Here are a few examples:

• If only a subset of the state changes, and the selector only depends on that subset, it won’t re-run. This is because the `mapStateToProps` function will only re-compute the props that depend on the changed state.

• If the selector uses memoization, it won’t re-run even if the state changes. Memoization is a technique that caches the result of a function so that it’s not re-computed unnecessarily.

import { createSelector } from 'reselect';

const selectUser = createSelector(
  state => state.user,
  user => user.name
);

const mapStateToProps = state => ({
  userName: selectUser(state),
});

In the example above, the `selectUser` selector uses memoization to cache the result of the `user.name` computation. If the `user` slice of the state changes, but the `name` property remains the same, the selector won’t re-run.

Optimizing Selectors for Performance

import { createSelector } from 'reselect';

const selectUser = createSelector(
  state => state.user,
  user => user.name
);

const mapStateToProps = state => ({
  userName: selectUser(state),
});

import { shallowEqual } from 'react-redux';

const mapStateToProps = (state, ownProps) => {
  const prevProps = ownProps.prevProps;
  if (!prevProps || !shallowEqual(prevProps, state)) {
    return {
      user: selectUser(state),
    };
  }
  return prevProps;
};