Це доволі типове питання на інтервʼю, якщо в стеку проєкта використовується React. Варто почати з того, що обидва хуки - useEffect і useLayoutEffect використовуються для роботи з side effects, а найголовніша різниця між ними - момент виконання.
useEffect
Він спрацьовує після того, як React відрендерив компонент і браузер вже відмалював зміни на екрані, саме тому цей хук не блокує відмальовку UI. З точки зору lifecycle, useEffect схожий на сomponentDidMount, який теж спрацьовує тільки після того, як компонент вмонтований в DOM і повністю доступний.
Типові кейси застосування:
- Запити до API, на отримання даних;
- Підписки (event listeners, WebSocket);
useLayoutEffect
Він спрацьовує після того, як React оновив DOM, але до того, як браузер відмалює сторінку. Через це він блокує відмальовку UI, поки код всередині хука не виконається. Цей хук використовують тоді, коли потрібно синхронно працювати з DOM. Простими словами: useLayoutEffect потрібен, коли треба щось поправити в DOM так, щоб користувач цього не побачив.
Типові кейси застосування:
- Вимірювання ширини або висоти елементів;
- Зміна scroll-позиції;
- Синхронна зміна стилів;
- Уникнення миготіння або стрибків інтерфейсу (найчастіший кейс);