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 создаёт новый объект состояния, объединяя текущее состояние с переданными данными. Это необходимо для корректного обнаружения изменений и перерисовки компонента. Старая ссылка на объект состояния заменяется новой, что гарантирует иммутабельность.

Question 9

Гарантирует ли React стабильность ссылки на setter из useState между рендерами?

Accepted Answer

Да, React гарантирует, что ссылка на функцию setter, возвращаемая из useState, остаётся стабильной между рендерами. Это означает, что функция не пересоздаётся при каждом рендере, если только компонент не размонтируется и не монтируется заново. Такая стабильность позволяет безопасно использовать setter в зависимостях эффектов или передавать его в дочерние компоненты без лишних ререндеров.

Question 10

Как вызов setState внутри компонента влияет на его дочерние компоненты?

Accepted Answer

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

Вопросы React Frontend Developer