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

Bij het uitvoeren van deze code in de console zal de uitvoervolgorde als volgt zijn:

1
3
2
4

Uitleg:

• Bij het renderen van de App-component wordt eerst console.log('1') uitgevoerd.
• Vervolgens wordt de Child-component gerenderd, waar console.log('3') wordt aangeroepen.
• Na het voltooien van de rendering roept React de useEffect-effecten aan in de volgorde waarin ze zijn gedeclareerd, maar alleen nadat de componenten zijn gemonteerd.
• Eerst wordt het effect van App (console.log('2')) uitgevoerd, daarna dat van Child (console.log('4')).

Zo volgen de synchronische logs de volgorde van de functieaanroepen, en worden de effecten na de rendering uitgevoerd, in de volgorde van hun declaratie.