Вопрос с собеседования · Frontend

Почему не нужно хранить в state то, что можно вычислить из других данных?

Q: Почему не нужно хранить в state то, что можно вычислить из других данных?

Если значение вычисляется из props или другого состояния (отфильтрованный список, сумма корзины, полное имя), его считают во время рендера, а не хранят в отдельном state. Дублирующее состояние нужно синхронизировать эффектами — это лишний рендер и источник рассинхронизации. Дорогое вычисление оборачивают в useMemo, если замер показывает пользу. Минимальное состояние: храните только то, что нельзя вычислить Сброс состояния при смене props — key на компоненте, а не эффект Выбранный элемент храните как id, а не копию объекта Признак ошибки: useEffect, который только вызывает setState из других состояний

MiddleReact

Ещё спрашивают так:

Что такое производное состояние?

Коротко

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

Минимальное состояние: храните только то, что нельзя вычислить
Сброс состояния при смене props — key на компоненте, а не эффект
Выбранный элемент храните как id, а не копию объекта

А ещё Признак ошибки: useEffect, который только вызывает setState из других состояний

Подробно

// плохо
const [visible, setVisible] = useState(todos);
useEffect(() => setVisible(todos.filter(t => !t.done)), [todos]);
// хорошо
const visible = todos.filter(t => !t.done);

Что хотят услышать

Вычислять при рендере.
Проблемы дублирующего состояния.
useMemo по замеру, key для сброса.

Проверьте себя

Один верный вариант. Подумайте, потом откройте ответ.

Показать варианты и ответ

✗Отфильтрованный список хранить в отдельном state и обновлять эффектом при каждом изменении
✓Вычисляемое считают при рендере, а не дублируют в state, требующем синхронизации
✗Любое вычисление при рендере нужно оборачивать в useMemo, иначе компонент тормозит
✗Выбранный элемент лучше хранить в state полной копией объекта, а не его идентификатором

Связанные вопросы

Партнёр платформы

Разбор собеседования с sotto

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

Разбор собеседования