useLayoutEffect — это хук, похожий на useEffect, но с одним важным отличием: он выполняется синхронно после всех изменений в DOM, перед тем, как браузер отрисует изменения на экране. Это делает его полезным для задач, где важно измерение DOM-элементов или установка их положения до отображения пользователю.
💡 Когда использовать useLayoutEffect?
- Когда нужно измерить или изменить DOM до его отрисовки.
- Для синхронных эффектов, влияющих на макет страницы (например, расчет высоты элемента).
🔧 Пример:
🚀 Как работает?
useLayoutEffect блокирует отображение контента, пока все эффекты не будут выполнены. Это гарантирует, что все измерения и модификации DOM будут завершены до рендеринга.
⚠️ Когда НЕ использовать useLayoutEffect?
Если вам не нужно манипулировать DOM до рендеринга — используйте обычный useEffect, который не блокирует интерфейс.