Что такое производное состояние и почему его следует избегать дублирования?

Question

IT Interview Practice · Accepted Answer

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

## Анти-паттерн: сохранение того, что вы можете вычислить

```jsx
// ❌ storing a derived value as separate state
function Cart() {
  const [items, setItems] = useState([]);
  const [total, setTotal] = useState(0); // DUPLICATE — derivable from items

function addItem(item) {
    setItems([...items, item]);
    setTotal(total + item.price); // must remember to update total too — easy to forget 🐛
  }
}
```

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

## Решение: производное вычисление при рендере

```jsx
// ✅ compute total from items — always correct, never out of sync
function Cart() {
  const [items, setItems] = useState([]);
  const total = items.reduce((sum, i) => sum + i.price, 0); // derived each render

function addItem(item) {
    setItems([...items, item]); // ONE update; total recomputes automatically
  }
}
```

С производным `total` нечего синхронизировать — измените `items` и общее значение всегда правильное.

## Мемоизация только если вычисление дорогостоящее

```jsx
const sortedFiltered = useMemo(
  () => items.filter(i => i.active).sort(compareFn), // expensive derivation
  [items]                                            // recompute only when items change
);
```

Для тяжелых производных вычислений (большие фильтры/сортировки), `useMemo`/`computed`/селекторы кэшируют результат, чтобы он пересчитывался только при изменении зависимостей — но это всё ещё *производное*, а не сохранённое как независимое состояние.

## Общие производные значения

```text
Totals/counts, filtered or sorted lists, fullName from first+last,
isValid from form fields, formatted/displayed strings, "is everything selected?"
```

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

Не дублирование производного состояния — это прямое применение принципа единственного источника истины — это устраняет целый класс ошибок, когда копии расходятся.

Правило "производное, не сохранённое" держит ваше состояние минимальным и ваш UI последовательным по конструкции.

Признание того, что является производным (и использование `useMemo`/computed/селекторов только для производительности, никогда чтобы создать второй источник истины) — это признак чистого, устойчивого к ошибкам проектирования состояния.

Анти-паттерн: сохранение того, что вы можете вычислить

Решение: производное вычисление при рендере

Мемоизация только если вычисление дорогостоящее

Общие производные значения

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

Похожие вопросы