Learn React Hooks

Memoizing selectors that only depend on state

If we want to memoize selectors, and the selector only depends on the state (not props), we can declare the selector outside of the component, as follows:

1. Edit the src/components/TodoList.js file, and import the createSelector function from reselect:

import { createSelector } from 'reselect'

2. Then, we define selectors for the todos and filter parts of the state, before the component definition:

const todosSelector = state => state.todosconst filterSelector = state => state.filter

If selectors are used by many components, it might make sense to put them in a separate selectors.js file, and import them from there. For example, we could put the filterSelector in a separate file, and then import ...