Какие знаешь способы мемоизации в Redux

«Какие знаешь способы мемоизации в Redux» — вопрос из категории Библиотеки, который задают на 10% собеседований Frontend Разработчик. Ниже — развёрнутый ответ с разбором ключевых моментов.

Ответ

В Redux мемоизация используется для оптимизации производительности, предотвращая лишние перерендеры. Основные способы:

  1. reselect - библиотека для создания мемоизированных селекторов. Пример:
import { createSelector } from 'reselect';

const selectItems = state => state.items;
const selectFilter = state => state.filter;

export const selectFilteredItems = createSelector(
  [selectItems, selectFilter],
  (items, filter) => items.filter(item => item.includes(filter))
);
  1. React.memo - для мемоизации компонентов:
const MemoizedComponent = React.memo(MyComponent);
  1. useMemo/useCallback в React-компонентах:
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
const memoizedCallback = useCallback(() => doSomething(a, b), [a, b]);
  1. Ручная мемоизация в редьюсерах через сравнение предыдущего и нового состояния.

Для сложных приложений лучше использовать reselect, так как он предоставляет композируемые селекторы с зависимостями.