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

Ao executar este código na consola, a ordem de saída será a seguinte:

1
3
2
4

Explicação:

• Ao renderizar o componente App, console.log('1') é executado primeiro.
• Depois, o componente Child é renderizado, onde console.log('3') é chamado.
• Após a conclusão da renderização, o React chama os efeitos useEffect na ordem em que são declarados, mas somente após a montagem dos componentes.
• Primeiro, o efeito do App (console.log('2')) é executado, seguido pelo efeito do Child (console.log('4')).

Dessa forma, os logs síncronos seguem a ordem das chamadas de funções, e os efeitos são executados após a renderização, na ordem de declaração.