React Frontend Developer

Question 1

Как работает useReducer и когда его использовать вместо useState или Redux?

Accepted Answer

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

Question 2

Для чего нужен useState?

Accepted Answer

useState нужен для хранения и изменения состояния внутри функционального компонента. Он позволяет React отслеживать изменения данных и перерисовывать компонент. Состояние сохраняется между рендерами. Без useState компонент был бы статичным. Это один из базовых хуков React.

Question 3

Какие аргументы может принимать сеттер из useState?

Accepted Answer

Сеттер из useState может принимать либо новое значение, либо функцию-обновитель. Функция-обновитель получает предыдущее состояние и возвращает новое. Второй вариант нужен, когда новое состояние зависит от предыдущего. React сам решает, когда применить обновление.

Question 4

Чем useRef отличается от useState?

Accepted Answer

useState используется для хранения данных, изменение которых должно вызывать перерендер компонента. useRef хранит изменяемое значение, изменение которого не вызывает перерендер. useRef часто применяют для доступа к DOM-элементам или для хранения технических значений (таймеры, предыдущие значения). Выбор зависит от того, влияет ли изменение значения на отображение UI.

Question 5

Почему useState не реагирует на мутацию объекта без смены ссылки?

Accepted Answer

useState сравнивает старое и новое значение по ссылке. Если ссылка не изменилась, React считает, что состояние осталось тем же самым. При мутации объекта ссылка остаётся прежней, поэтому ререндер не запускается. Чтобы React обновился, нужно создать новый объект.

Question 6

Как связать внешний объект с React через useRef?

Accepted Answer

useRef позволяет хранить ссылку на внешний объект между рендерами без их запуска. Через ref.current можно читать и изменять данные, но React не будет автоматически перерисовываться. Чтобы изменения отразились в UI, нужно дополнительно инициировать ререндер, например через useState или подписку. useRef подходит для хранения ссылок, а не реактивного состояния.

Question 7

Как оптимизировать компонент с большим количеством useState?

Accepted Answer

Когда компонент использует много useState, это может привести к частым ререндерам и снижению производительности. Оптимизировать можно несколькими способами: объединить связанные состояния в один объект с помощью useReducer, чтобы обновлять их одним действием. Использовать мемоизацию через React.memo, useMemo и useCallback, чтобы предотвращать лишние вычисления и рендеры дочерних компонентов. Также стоит разделить большой компонент на более мелкие, изолировав состояния, которые меняются независимо. Это уменьшит область перерисовки.

Вопросы React Frontend Developer