В каких кейсах используется useLayoutEffect

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

1. Измерение DOM-элементов (ширина, высота, позиция) перед отрисовкой:

useLayoutEffect(() => {
  const rect = ref.current.getBoundingClientRect();
  setSize({ width: rect.width, height: rect.height });
}, []);

2. Анимации/трансформации - когда нужно избежать визуального мерцания при изменении стилей.

3. Синхронные мутации DOM перед тем как пользователь увидит изменения.

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