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>; }

Beim Ausführen dieses Codes in der Konsole ist die folgende Ausgabe-Reihenfolge zu erwarten:

1
3
2
4

Erläuterung:

• Beim Rendern der Komponente App wird zuerst console.log('1') ausgeführt.
• Danach wird die Komponente Child gerendert, in der console.log('3') aufgerufen wird.
• Nach Abschluss des Renderings ruft React die useEffect-Effekte in der Reihenfolge ihrer Deklaration auf, aber nur nach dem Mounten der Komponenten.
• Zuerst wird der Effekt aus App (console.log('2')) ausgeführt, dann der Effekt aus Child (console.log('4')).

Somit folgen die synchronen Logs der Reihenfolge der Funktionsaufrufe, und die Effekte werden nach dem Rendering in der Reihenfolge ihrer Deklaration ausgeführt.