Порядок вывода console.log в React‑компоненте №62

Условие

Определите, в какой последовательности появятся сообщения в консоли при первом рендере компонента, учитывая работу хуков useEffect, useLayoutEffect и их функций очистки.

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

export function App() {
    console.log('App');
    const [counter, setCounter] = useState(0);

    useEffect(() => {
        setCounter(prev => prev + 1);
    }, []);

    useEffect(() => {
        console.log('useEffect 1');
        return () => {
            console.log('useEffect 1, cleanup');
        };
    }, [counter]);

    useEffect(() => {
        console.log('useEffect 2');
        return () => {
            console.log('useEffect 2 cleanup');
        };
    }, [counter]);

    useLayoutEffect(() => {
        console.log('useLayoutEffect');
        return () => {
            console.log('useLayoutEffect cleanup');
        };
    }, [counter]);

    return null;
}

Ответ

Без Strict Mode первый commit печатает App, useLayoutEffect, useEffect 1, useEffect 2. Эффект с инкрементом затем вызывает ещё один рендер и перезапуск зависимых эффектов.

Полная обычная последовательность после начального commit: App → useLayoutEffect cleanup → useLayoutEffect → useEffect 1, cleanup → useEffect 2 cleanup → useEffect 1 → useEffect 2. Очищается эффект с прежним counter, затем создаётся с новым. Dev Strict Mode добавляет пробные рендеры и цикл setup/cleanup, поэтому без указания режима нельзя гарантировать одинаковое количество сообщений.

Источник: react.dev.