React Frontend Developer

Question 1

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

Accepted Answer

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

Question 2

Чем отличается скрытие элементов с помощью opacity, visibility и display: none?

Accepted Answer

opacity: 0 делает элемент невидимым, но он продолжает занимать место и реагировать на события. visibility: hidden также скрывает элемент, сохраняя его место в layout, но события мыши не срабатывают. display: none полностью удаляет элемент из потока документа, освобождая занимаемое место.

Question 3

Что происходит на этапах Layout, Paint и Composite?

Accepted Answer

Layout, Paint и Composite — это основные этапы рендеринга страницы в браузере.
На этапе Layout рассчитываются размеры и позиции элементов.
На этапе Paint элементы рисуются в слои.
На этапе Composite слои объединяются и выводятся на экран.

Question 4

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

Accepted Answer

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

Question 5

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

Accepted Answer

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

Question 6

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

Accepted Answer

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

Question 7

Как сделать layout из трёх колонок с фиксированной левой и резиновыми правыми?

Accepted Answer

Проще всего использовать CSS Grid: задать фиксированную ширину первой колонки и fr для остальных. Grid сразу описывает структуру и не требует сложных расчётов. Альтернатива — Flexbox, где первая колонка фиксированная, а остальные растягиваются через flex: 1. Grid обычно читается проще и масштабируется лучше.

Question 8

Как отцентрировать элемент поверх нескольких колонок Grid?

Accepted Answer

Чтобы отцентрировать элемент поверх нескольких колонок Grid, обычно используют grid-column для растягивания элемента и place-self: center или flex внутри него. Альтернатива — абсолютное позиционирование относительно grid-контейнера. Grid-способ предпочтительнее, потому что он остаётся декларативным и адаптивным. Абсолютное позиционирование используют, если элемент не должен влиять на сетку

Question 9

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

Accepted Answer

Чтобы позиционировать модалку относительно части layout’а, контейнер делают position: relative, а модалку — position: absolute. Тогда координаты считаются от этого контейнера, а не от окна браузера. Такой подход полезен для локальных модалок, попапов и dropdown’ов. Для глобальных модалок обычно используют position: fixed и порталы.

Question 10

Как useLayoutEffect влияет на отображение UI

Accepted Answer

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

Вопросы React Frontend Developer