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

Al ejecutar este código en la consola, el orden de salida será el siguiente:

1
3
2
4

Explicación:

• Al renderizar el componente App, primero se ejecuta console.log('1').
• Luego se renderiza el componente Child, donde se llama a console.log('3').
• Después de completar el renderizado, React llama a los efectos de useEffect en el orden en que se declaran, pero solo después de montar los componentes.
• Primero se ejecuta el efecto del App (console.log('2')), luego el efecto del Child (console.log('4')).

De esta manera, los logs sincrónicos siguen el orden de las llamadas a funciones, y los efectos se ejecutan después del renderizado, en el orden en que se declaran.