React Frontend Developer

Question 1

Как правильно использовать useEffect для различных ситуаций?

Accepted Answer

Хук useEffect используется для выполнения побочных эффектов в функциональных компонентах, таких как запросы к API, подписки или манипуляции с DOM. Он принимает два аргумента: функцию обратного вызова и массив зависимостей. Массив определяет, когда эффект должен быть запущен, например, при первом рендеринге или при изменении определенных переменных. Для очистки эффектов можно вернуть функцию из хука.

Question 2

Какие особенности имеют хуки useEffect и useLayoutEffect?

Accepted Answer

useEffect выполняется асинхронно после рендеринга, что позволяет обновлять DOM без блокировки отображения. useLayoutEffect, напротив, выполняется синхронно сразу после изменения DOM и перед его отображением, что позволяет производить измерения или манипуляции с элементами. Это может быть полезно, когда необходимо сразу же реагировать на изменения и избежать мерцания интерфейса.

Question 3

Если в useEffect сделать долгий fetch (например, на минуту), заблокирует ли это выполнение JS и интерфейс браузера? Почему он не ждёт ответа?

Accepted Answer

Нет, долгий fetch не заблокирует интерфейс, потому что он выполняется асинхронно. JavaScript не "ждёт" ответа — запрос отправляется в фоне, а основной поток продолжает работать.

Question 4

Как useEffect заменяет методы жизненного цикла? Что происходит при пустом массиве зависимостей?

Accepted Answer

useEffect объединяет логику componentDidMount, componentDidUpdate и componentWillUnmount. Пустой массив зависимостей ([]) означает, что эффект запустится только при монтировании и очистится при размонтировании.

Question 5

Как работает массив зависимостей в useEffect?

Accepted Answer

Массив зависимостей определяет, при каких изменениях эффект будет выполнен повторно. React сравнивает значения зависимостей между рендерами. Если хотя бы одно значение изменилось, эффект перезапускается. Сравнение происходит по ссылке. Правильное указание зависимостей критично для корректной работы приложения.

Question 6

Что произойдёт, если не передать массив зависимостей в useEffect?

Accepted Answer

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

Question 7

Почему useLayoutEffect может блокировать рендер?

Accepted Answer

useLayoutEffect выполняется синхронно после изменения DOM, но до того, как браузер выполнит отрисовку. Пока код внутри эффекта не завершится, браузер не может показать обновлённый интерфейс. Если эффект содержит тяжёлые вычисления, рендер визуально «зависает». Именно поэтому неправильное использование useLayoutEffect может ухудшать производительность. Этот хук требует особой осторожности.

Question 8

Зачем нужен useEffect?

Accepted Answer

useEffect нужен для выполнения побочных эффектов в функциональных компонентах. Он используется для работы с внешними системами: API, таймерами, подписками, DOM. useEffect выполняется после рендера компонента. С помощью массива зависимостей можно контролировать, когда эффект должен запускаться.

Question 9

Когда useEffect вызывается один раз?

Accepted Answer

useEffect вызывается один раз, если ему передан пустой массив зависимостей []. В этом случае эффект выполняется после первого рендера компонента. Это поведение эквивалентно componentDidMount в классовых компонентах. Однако в StrictMode в режиме разработки эффект может вызываться дважды.

Question 10

В каком порядке выполняются render, useLayoutEffect и useEffect?

Accepted Answer

Сначала React выполняет render, затем на этапе коммита вызывается useLayoutEffect, и только после отрисовки браузером вызывается useEffect. useLayoutEffect выполняется синхронно и блокирует отрисовку, а useEffect — асинхронно, после paint. Поэтому useLayoutEffect используют для работы с layout, а useEffect — для побочных эффектов, не влияющих на разметку.

Вопросы React Frontend Developer