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

A kód futtatásakor a konzolon a következő sorrendben jelennek meg az eredmények:

1
3
2
4

Magyarázat:

• Az App komponens renderelésekor először a console.log('1') fut le.
• Ezután a Child komponens renderelése történik, ahol a console.log('3') kerül meghívásra.
• A render befejezése után a React meghívja a useEffect hatásokat a deklarációjuk sorrendjében, de csak a komponensek mountolása után.
• Először az App hatása (console.log('2')), majd a Child hatása (console.log('4')) fut le.

Így a szinkron logok a függvényhívások sorrendjét követik, míg a hatások a render után, a deklarációjuk sorrendjében kerülnek végrehajtásra.