React Frontend Developer

Question 1

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

Accepted Answer

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

Question 2

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

Accepted Answer

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

Question 3

Для чего нужны сайд-эффекты (LaunchedEffect, DisposableEffect)? Приведите примеры.

Accepted Answer

Сайд-эффекты — это действия вне Composable-функции (например, запросы в сеть).

LaunchedEffect: для корутин (анимации, API-запросы).
DisposableEffect: для ресурсов с очисткой (подписки, слушатели).

Question 4

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

Accepted Answer

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

Question 5

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

Accepted Answer

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

Question 6

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

Accepted Answer

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

Question 7

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

Accepted Answer

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

Question 8

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

Accepted Answer

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

Question 9

В каких случаях стоит использовать useLayoutEffect?

Accepted Answer

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

Question 10

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

Accepted Answer

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

Вопросы React Frontend Developer