import { useState, useEffect } from 'react'; export default function App() { console.log('1'); useEffect(() => { console.log('2'); }, []); return <Child />; } function Child() { console.log('3'); useEffect(() => { console.log('4'); }, []); return <div>Bcraft</div>; }

Podczas wykonywania tego kodu w konsoli, kolejność wyświetleń będzie następująca:

1
3
2
4

Wyjaśnienie:

• Podczas renderowania komponentu App najpierw wykonywane jest console.log('1').
• Następnie renderowany jest komponent Child, w którym wywoływane jest console.log('3').
• Po zakończeniu renderowania React wywołuje efekty useEffect w kolejności ich deklaracji, ale tylko po zamontowaniu komponentów.
• Najpierw uruchamia się efekt z App (console.log('2')), potem efekt z Child (console.log('4')).

W ten sposób, synchroniczne logi idą w kolejności wywołań funkcji, a efekty — po renderze, w kolejności ich deklaracji.