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

Eseguendo questo codice nella console, l'ordine di output sarà il seguente:

1
3
2
4

Spiegazione:

• Quando il componente App viene renderizzato, viene eseguito prima console.log('1').
• Successivamente, viene renderizzato il componente Child, dove viene chiamato console.log('3').
• Dopo il completamento del rendering, React chiama gli effetti useEffect nell'ordine in cui sono dichiarati, ma solo dopo il montaggio dei componenti.
• Prima viene eseguito l'effetto di App (console.log('2')), poi quello di Child (console.log('4')).

In questo modo, i log sincroni seguono l'ordine delle chiamate di funzione, mentre gli effetti vengono eseguiti dopo il rendering, nell'ordine di dichiarazione.