Что такое селекторы и мемоизация в управлении состоянием?

Question

Accepted Answer

**Селектор** — это функция, которая **читает (выводит) конкретный фрагмент данных из состояния**. **Мемоизация** кэширует результат селектора, чтобы он пересчитывался только когда меняются его входные данные — важно для производительности, когда селекторы выполняют дорогостоящие операции или чтобы избежать ненужных перерисовок.

## Базовые селекторы — инкапсулируют доступ к состоянию

```js
// a selector knows HOW to pull a value out of the state shape
const selectUser = state => state.user;
const selectCartItems = state => state.cart.items;
const selectCartTotal = state =>
  state.cart.items.reduce((sum, i) => sum + i.price, 0); // derived
```

Селекторы централизуют знание о структуре состояния — компоненты запрашивают `selectCartTotal(state)` без знания где/как это хранится, поэтому если форма состояния изменится, вы обновляете один селектор, а не каждый компонент.

## Проблема: производные селекторы пересчитываются при каждом вызове

```js
const selectExpensiveList = state =>
  state.items.filter(i => i.active).sort(compareFn); // runs EVERY time, even if items didn't change
```

Селектор, который создает новый массив/объект, возвращает **новую ссылку** при каждом вызове — что может вызвать ненужные перерисовки (React видит "новое" значение) и тратит вычисления впустую.

## Решение: мемоизированные селекторы (Reselect)

```js
import { createSelector } from "reselect"; // or RTK's createSelector

const selectActiveSorted = createSelector(
  [state => state.items],                       // input selector(s)
  (items) => items.filter(i => i.active).sort(compareFn) // recompute ONLY if items changed
);
```

`createSelector` кэширует результат и только переиспользует дорогостоящее вычисление когда его входные данные (`state.items`) действительно изменяются — в противном случае он возвращает **ту же ссылку**, предотвращая как пересчет, так и нежелательные перерисовки в нисходящих компонентах.

## Композиция селекторов

```js
const selectTotal = createSelector(
  [selectActiveSorted, selectTaxRate],          // build on other selectors
  (items, rate) => items.reduce((s, i) => s + i.price, 0) * (1 + rate)
);
```

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

## Почему это важно

Селекторы отделяют компоненты от формы состояния (преимущество в поддержке) и предоставляют одно место для выражения производных данных.

Мемоизация делает производные селекторы эффективными — избегая повторных дорогостоящих вычислений и, что критически важно, возвращая стабильные ссылки, чтобы подключенные компоненты не перерисовывались без необходимости.

В приложениях Redux/NgRx мемоизированные селекторы (Reselect/`createSelector`) являются ключевым инструментом производительности и архитектуры; та же идея кэширования появляется как `useMemo` и `computed` в других местах.