React Frontend Developer

Question 1

Как управлять фокусом с помощью хука useRef?

Accepted Answer

Хук useRef используется для получения доступа к DOM-элементам в React. Вы можете создать реф с помощью useRef, а затем присвоить его элементу через атрибут ref. Это позволяет вам управлять фокусом, используя методы, такие как focus() для установки фокуса на элемент, например, при загрузке компонента или по событию, как нажатие кнопки.

Question 2

Как работает useRef и что он возвращает?

Accepted Answer

useRef возвращает объект с полем current.Значение current сохраняется между рендерами.Изменение current не вызывает перерендер.Чаще всего useRef используют для доступа к DOM или хранения служебных данных.

Question 3

Как useRef используется для работы с DOM?

Accepted Answer

useRef позволяет получить ссылку на DOM-элемент и обращаться к нему напрямую. Значение ref сохраняется между рендерами и не вызывает перерисовку при изменении. Это удобно для фокуса, измерений и интеграции с нативными API. useRef часто используют там, где состояние React избыточно. Он работает как контейнер для изменяемого значения.

Question 4

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

Accepted Answer

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

Question 5

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

Accepted Answer

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

Question 6

Почему useRef не вызывает ререндер при изменении значения?

Accepted Answer

useRef возвращает изменяемый (mutable) объект, свойство .current которого можно менять. Изменение .current не вызывает ререндер компонента, потому что React не отслеживает изменения внутри ref-объекта для целей обновления UI. В отличие от useState, вызов setState помечает компонент как нуждающийся в ререндере. useRef предназначен для хранения значений, которые должны сохраняться между рендерами, но не влияют на визуальный вывод.

Question 7

Как подсчитать количество ререндеров компонента?

Accepted Answer

Для подсчета ререндеров используйте useRef, который сохраняет значение между рендерами без вызова нового рендера. Создайте счетчик через useRef(0) и увеличивайте его в теле компонента. Затем выводите значение в useEffect или прямо в JSX. Это позволяет отследить, сколько раз компонент обновился.

Question 8

Как оптимизировать React-компонент с таймером?

Accepted Answer

Для оптимизации React-компонента с таймером используйте хук useEffect для установки таймера и обязательно очищайте его в функции cleanup, чтобы избежать утечек памяти. Используйте useRef для хранения идентификатора таймера, чтобы он сохранялся между рендерами. Это гарантирует, что таймер будет корректно остановлен при размонтировании компонента или изменении зависимостей.

Вопросы React Frontend Developer