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

Κατά την εκτέλεση αυτού του κώδικα στη κονσόλα, η σειρά εμφάνισης θα είναι η εξής:

1
3
2
4

Εξήγηση:

• Κατά το render του συστατικού App, εκτελείται πρώτα το console.log('1').
• Στη συνέχεια, γίνεται render του συστατικού Child, όπου καλείται το console.log('3').
• Μετά την ολοκλήρωση του render, το React καλεί τα effects useEffect με τη σειρά που δηλώνονται, αλλά μόνο μετά την τοποθέτηση των συστατικών.
• Πρώτα εκτελείται το effect από το App (console.log('2')), και στη συνέχεια από το Child (console.log('4')).

Έτσι, τα συγχρονικά logs ακολουθούν τη σειρά των κλήσεων των συναρτήσεων, και τα effects εκτελούνται μετά το render, με τη σειρά που δηλώνονται.