В чём разница между useEffect и useLayoutEffect?

useEffect vs useLayoutEffect

Timing (Время выполнения):

useEffect:

• Выполняется асинхронно после рендера
• Не блокирует отрисовку браузера

useLayoutEffect:

• Выполняется синхронно после DOM mutations
• До отрисовки браузера
• Блокирует визуальное обновление

Порядок выполнения:

1. React renders
2. DOM updated
3. useLayoutEffect runs ← синхронно
4. Browser paints screen
5. useEffect runs ← асинхронно

Когда использовать useLayoutEffect:

// 1. Измерение DOM элементов
function Tooltip({ text, targetRef }) {
    const [position, setPosition] = useState({ x: 0, y: 0 });

    useLayoutEffect(() => {
        const rect = targetRef.current.getBoundingClientRect();
        setPosition({ x: rect.left, y: rect.top - 30 });
    }, [targetRef]);

    return <div style={{ left: position.x, top: position.y }}>{text}</div>;
}

// 2. Предотвращение мерцания
function AnimatedComponent() {
    const ref = useRef();

    useLayoutEffect(() => {
        // Устанавливаем начальные стили ДО отрисовки
        ref.current.style.opacity = 0;
        // Анимация...
    }, []);
}

// 3. Синхронизация с DOM
useLayoutEffect(() => {
    // Скролл к элементу без мерцания
    element.scrollIntoView();
}, [element]);

Когда использовать useEffect:

// 1. Fetch данных
useEffect(() => {
    fetchData().then(setData);
}, []);

// 2. Подписки
useEffect(() => {
    const subscription = eventSource.subscribe(handler);
    return () => subscription.unsubscribe();
}, []);

// 3. Логирование, аналитика
useEffect(() => {
    analytics.pageView(pathname);
}, [pathname]);

Сравнение:

Правило:

Начинайте с useEffect. Используйте useLayoutEffect только если видите мерцание или нужны синхронные DOM измерения.