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

Как работает useState?

Q: Как работает useState?

const [value, setValue] = useState(initial) — React хранит значение вне функции компонента, привязав его к позиции хука; при следующих рендерах возвращает текущее. setValue планирует перерисовку; если новое значение равно старому (Object.is) — рендер пропускается. Начальное значение используется только один раз; дорогое вычисление передают функцией: useState(() => parse(data)). Объекты и массивы обновляют неизменяемо — создают новые. Несколько независимых значений — несколько useState Связанные поля со сложной логикой — useReducer Обновления в обработчиках событий группируются в один рендер Мутация объекта и setState с той же ссылкой — React не увидит изменения

JuniorReact

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

Почему состояние сохраняется между рендерами?

Коротко

const [value, setValue] = useState(initial) — React хранит значение вне функции компонента, привязав его к позиции хука; при следующих рендерах возвращает текущее. setValue планирует перерисовку; если новое значение равно старому (Object.is) — рендер пропускается. Начальное значение используется только один раз; дорогое вычисление передают функцией: useState(() => parse(data)). Объекты и массивы обновляют неизменяемо — создают новые.

Несколько независимых значений — несколько useState
Связанные поля со сложной логикой — useReducer
Обновления в обработчиках событий группируются в один рендер

А ещё Мутация объекта и setState с той же ссылкой — React не увидит изменения

Подробно

const [items, setItems] = useState<string[]>([]);
const add = (s: string) => setItems(prev => [...prev, s]);
const [config] = useState(() => JSON.parse(localStorage.config ?? "{}"));

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

Хранение между рендерами.
setState планирует рендер, сравнение Object.is.
Ленивая инициализация и неизменяемость.

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

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

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

✗Начальное значение useState пересчитывается на каждом рендере и заменяет текущее
✗useState можно вызывать внутри условий
✓Хранит значение между рендерами; setState планирует перерисовку, объекты обновляют копиями
✗Изменить массив через push и вызвать setItems с той же ссылкой — правильный способ

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

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

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

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

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