O que são seletores e memoização no gerenciamento de estado?

Question

Accepted Answer

Um **seletor** é uma função que **lê (deriva) um dado específico do estado**. **Memoização** armazena em cache o resultado de um seletor para que ele só seja recalculado quando suas entradas mudem — importante para o desempenho quando seletores fazem trabalho caro ou para evitar re-renderizações desnecessárias.

## Seletores básicos — encapsulam o acesso ao estado

```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
```

Os seletores centralizam o conhecimento da estrutura do estado — os componentes pedem `selectCartTotal(state)` sem saber onde/como ele é armazenado, então se a forma do estado mudar, você atualiza um seletor, não cada componente.

## O problema: seletores derivados recalculam a cada chamada

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

Um seletor que cria um novo array/objeto retorna uma **nova referência** a cada chamada — o que pode disparar re-renderizações desnecessárias (React vê um valor "novo") e desperdiça computação.

## A solução: seletores memoizados (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` armazena o resultado em cache e só executa novamente a computação cara quando suas entradas (`state.items`) realmente mudam — caso contrário, ele retorna a **mesma referência**, impedindo tanto a recalculação quanto re-renderizações downstream.

## Composição de seletores

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

Os seletores se compõem, construindo derivações complexas a partir de partes simples e individualmente cacheadas.

## Por que isso importa

Os seletores desacoplam os componentes da forma do estado (uma vitória de manutenibilidade) e fornecem um lugar para expressar dados derivados.

A memoização torna os seletores derivados eficientes — evitando computação cara repetida e, crucialmente, retornando referências estáveis para que componentes conectados não sejam re-renderizados desnecessariamente.

Em aplicativos Redux/NgRx, seletores memoizados (Reselect/`createSelector`) são uma ferramenta essencial de desempenho e arquitetura; a mesma ideia de caching aparece como `useMemo` e `computed` em outros lugares.