Версия источника: 4880e8b4372c96001c2e052be28b68a95d31252b
Синхронизировано: 2026-11-09T11:15:07.649Z
Источник: https://github.com/sergey-from-riders/vibecoding-base/tree/4880e8b4372c96001c2e052be28b68a95d31252b

<a id="frontend-derived-state"></a>

# Производное состояние

## Коротко

Если значение полностью определяется текущими данными, вычислите его при отображении.

## Плохо

```javascript
useEffect(() => setFullName(first + " " + last), [first, last]);
```

## Хорошо

```javascript
const fullName = first + " " + last;
```

## Почему

Лишняя копия состояния требует синхронизации и создаёт промежуточные неверные значения.

## Когда применять

Effect нужен для синхронизации с внешней системой. Тяжёлое вычисление оптимизируйте после измерения.

## Как проверить

- Не хранится ли одна информация в нескольких состояниях?

## Человек

Определяет исходные данные и правила вычисления результата.

## Агент

Реализует поведение компонентов и проверяет изменение данных, загрузку и ошибку в браузере.

Контроль результата:

- Не хранится ли одна информация в нескольких состояниях?

## Пример применения

Корзина хранит позиции и количество; итог вычисляется при рендере из этих данных. Человек задаёт правила скидки, агент проверяет изменение количества и серверный перерасчёт перед оплатой.

## Источники

- [You Might Not Need an Effect – React](https://react.dev/learn/you-might-not-need-an-effect)

Уровень: Рекомендуется. Проверено: 2026-11-09. Изменено: 2026-11-09.

[Исходный файл](https://github.com/sergey-from-riders/vibecoding-base/blob/4880e8b4372c96001c2e052be28b68a95d31252b/registry/standards/frontend/react/rules/derived-state.md)