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

Při spuštění tohoto kódu v konzoli bude následující pořadí výstupu:

1
3
2
4

Vysvětlení:

• Při renderování komponenty App se nejprve provede console.log('1').
• Poté se vykreslí komponenta Child, kde se volá console.log('3').
• Po dokončení renderování React volá efekty useEffect ve pořadí jejich deklarace, ale pouze po namontování komponent.
• Nejprve se spustí efekt z App (console.log('2')), poté efekt z Child (console.log('4')).

Tímto způsobem synchronní logy následují pořadí volání funkcí, a efekty jsou spuštěny po renderu, v pořadí jejich deklarace.