Определение последовательности вывода в консоль при рендере React‑компонентов

Условие

Нужно понять, в каком порядке появятся сообщения в консоли при запуске следующего кода. Обратите внимание на порядок вызовов хуков и на то, где происходит их выполнение – во время рендера, в эффектах или в колбэках рефов.

 import {
    FC,
    PropsWithChildren,
    useEffect,
    uselayoutEffect,
    useInsertionEffect,
} from 'react';
import './style.css';

const FirstComponent: FCCPropsWithChildren> = {{ children }} => {
    console.log('1', '?');

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

return (
    <header>
        chl>React Order Puzzle</hl>
        (children)
    </header>
);
});

const SecondComponent: FC = () => {
    console.log('3', '?');

    useEffect(() => {
        console.log('4', '?');
    }, []);

    uselayoutEffect(() => {
        console.log('5', '?');
    }, []);

    return (
        <h3>
            ref=(() => {
                console.log('6', '?');
            });
            
            You need to figure out what sequence the numbers are displayed in the console
        </h3>
    );
};

const ThirdComponent: FC = {} => {
    console.log('7', '?');

    useEffect(() => {
        console.log('8', '?');
    }, []
);

    useLayoutEffect(() => {
        console.log('9', '?');
    }, []
);

return (
    <div>
        <p>In this input, you can enter the order of numbers
        <input className="input" />
        </div>
);
});

export const App: FC = {}
=> {
    useInsertionEffect(() => {
        console.log('10', '?');
    }, []
};

return (
    <main
        className="app"
        ref=(()) => {
            console.log('11', '?');
        })
        <FirstComponent>
            <SecondComponent />
        </FirstComponent>
        <ThirdComponent />
    </main>
    }
});

Ответ

Этот фрагмент не компилируется, поэтому корректной последовательности логов у него нет. Повреждены объявления компонентов, JSX, ref и имя useLayoutEffect; сначала нужно восстановить исполняемый пример.

В частности, FCCPropsWithChildren>, {{ children }}, {} =>, незакрытые вызовы эффектов и ref вне атрибута не являются корректным TSX. uselayoutEffect с маленькой l также не совпадает с экспортируемым useLayoutEffect.

После исправления логи тела компонентов относятся к render-фазе, ref и layout-эффекты — к commit, обычные эффекты — к пассивным эффектам. useInsertionEffect предназначен для внедрения стилей, а не универсальной синхронизации действий. Точный порядок нужно фиксировать для восстановленного дерева и режима запуска: Strict Mode может добавлять проверочные вызовы. Выдавать числовую последовательность для повреждённого исходника было бы выдумкой.