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

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

1. Когда выполняются хуки?

useEffect

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

Пример использования useEffect:

import React, { useEffect, useState } from 'react';

const ExampleComponent = () => {
    const [data, setData] = useState([]);

    useEffect(() => {
        const fetchData = async () => {
            const response = await fetch('https://api.example.com/data');
            const result = await response.json();
            setData(result);
        };
        
        fetchData();
    }, []); // Пустой массив означает, что эффект сработает только один раз при монтировании

    return (
        <div>
            {data.map(item => (
                <div key={item.id}>{item.name}</div>
            ))}
        </div>
    );
};

export default ExampleComponent;

useLayoutEffect

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

Пример использования useLayoutEffect:

import React, { useLayoutEffect, useRef } from 'react';

const ExampleComponent = () => {
    const divRef = useRef(null);

    useLayoutEffect(() => {
        if (divRef.current) {
            const height = divRef.current.clientHeight;
            console.log('Высота элемента:', height);
            // Выполнить дополнительные операции с высотой элемента
        }
    }, []); // Выполнится один раз при монтировании

    return <div ref={divRef}>Содержимое элемента</div>;
};

export default ExampleComponent;

2. Когда использовать?

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

Вывод

Оба хука - useEffect и useLayoutEffect - служат для управления побочными эффектами в React. Понимание различий между ними поможет вам выбирать правильный инструмент для каждых конкретных задач. В большинстве случаев, useEffect будет идеальным выбором, тогда как useLayoutEffect следует использовать только в случае необходимости блокировки отрисовки.