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

Lors de l'exécution de ce code dans la console, l'ordre d'affichage sera le suivant:

1
3
2
4

Explication:

• Lors du rendu du composant App, console.log('1') s'exécute en premier.
• Ensuite, le composant Child est rendu, où console.log('3') est appelé.
• Après le rendu, React exécute les effets useEffect dans l'ordre de leur déclaration, mais uniquement après le montage des composants.
• L'effet du App (console.log('2')) s'exécute en premier, puis celui du Child (console.log('4')).

Ainsi, les logs synchrones suivent l'ordre des appels de fonctions, et les effets sont exécutés après le rendu, dans l'ordre de leur déclaration.