React Frontend Developer

Question 1

Как объединить обновление состояния для нескольких setState?

Accepted Answer

React группирует несколько вызовов setState, происходящих в одном синхронном событии, в одно обновление, чтобы избежать лишних перерендеров. Это поведение называется батчинг, и оно работает по умолчанию в обработчиках событий React, но в асинхронном коде раньше требовалось вручную вызывать flushSync или unstable_batchedUpdates.

Question 2

Асинхронный или синхронный setState в React?

Accepted Answer

setState в React не является строго синхронным или асинхронным. React может объединять несколько обновлений состояния для оптимизации. Обновление состояния происходит не сразу, а планируется. Поэтому сразу после вызова setState новое значение может быть недоступно. Это поведение зависит от режима выполнения и окружения.

Question 3

Чем отличается передача значения и callback в setState?

Accepted Answer

Передача значения в setState напрямую подставляет новое состояние, а callback (функция-обновитель) вычисляет его на основе предыдущего. Callback гарантирует корректность при нескольких обновлениях подряд. Это особенно важно при асинхронных событиях и батчинге обновлений. В React hooks callback — это предпочтительный способ при зависимостях от старого состояния.

Question 4

Почему значение state не обновляется сразу после setState?

Accepted Answer

setState в React работает асинхронно для оптимизации производительности. React группирует несколько вызовов setState в один пакет (batching) и обновляет состояние после завершения обработки всех событий. Поэтому сразу после вызова setState значение state остается старым. Чтобы получить актуальное состояние, используйте колбэк в setState или useEffect.

Question 5

Почему лучше использовать callback-версию setState?

Accepted Answer

Callback-версия setState гарантирует, что вы работаете с самым актуальным состоянием компонента. React может группировать несколько вызовов setState в один, поэтому при использовании объекта состояние может устареть. Функция-колбэк получает предыдущее состояние и пропсы, что позволяет безопасно обновлять состояние на основе его предыдущего значения. Это особенно важно при множественных последовательных вызовах setState или при работе с асинхронными операциями.

Question 6

Как работает батчинг обновлений состояния в React 18?

Accepted Answer

Батчинг в React 18 — это автоматическая группировка нескольких вызовов setState в один повторный рендер. Ранее батчинг работал только внутри обработчиков событий React, а теперь он включен по умолчанию для всех обновлений, включая промисы, setTimeout и нативные события. Это повышает производительность, уменьшая количество лишних рендеров. Для отключения батчинга используется flushSync.

Question 7

Как корректно сравнить два объекта по полям для предотвращения лишних вызовов setState?

Accepted Answer

Для сравнения объектов по полям в React используется поверхностное сравнение (shallow comparison). Оно проверяет, изменились ли ссылки на поля объекта, а не их глубокое содержимое. Это реализовано в React.memo и shouldComponentUpdate. Чтобы сравнение работало корректно, объекты должны быть иммутабельными — при изменении создаётся новый объект. Такой подход предотвращает лишние вызовы setState и ререндеры.

Question 8

Когда вызывается setState, создаётся ли новая ссылка на объект состояния?

Accepted Answer

Да, при вызове setState React создаёт новый объект состояния, объединяя текущее состояние с переданными данными. Это необходимо для корректного обнаружения изменений и перерисовки компонента. Старая ссылка на объект состояния заменяется новой, что гарантирует иммутабельность.

Вопросы React Frontend Developer