Порядок вывода 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;
}