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

Question 8

Будет ли ре-рендер компонента, если в useState записывается новый объект с теми же данными?

Accepted Answer

Да, ре-рендер произойдет. React сравнивает предыдущее и новое состояние с помощью строгого сравнения (===). Если вы передаете новый объект, даже с теми же данными, это новый объект в памяти, поэтому React считает состояние измененным и запускает ре-рендер компонента.

Question 9

Зачем в useState можно передать функцию вместо значения? В чём отличие и когда это нужно?

Accepted Answer

Передача функции в useState позволяет выполнить инициализацию состояния только один раз при первом рендере. Это полезно, когда начальное значение требует сложных вычислений или чтения из localStorage. В отличие от передачи значения, функция не будет вызываться при каждом обновлении компонента, что повышает производительность.

Question 10

Что можно положить в initial value useState?

Accepted Answer

В useState можно положить любое значение: примитив (число, строка, булево), объект, массив, null, undefined или функцию. Если передать функцию, React вызовет её только при первом рендере — это называется ленивой инициализацией. Нельзя передавать Promise или другие асинхронные значения напрямую.

Вопросы React Frontend Developer