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

Ներկայացման բացատրություն՝

• Երբ App կոմպոնենտը ռենդեր է, առաջինը կատարվում է console.log('1'):
• Այնուհետև ռենդեր է կատարվում Child կոմպոնենտը, որտեղ կանչվում է console.log('3'):
• Ռենդերի ավարտից հետո React-ը կանչում է useEffect ազդեցությունները՝ ըստ դրանց հայտարարության կարգի, բայց միայն կոմպոնենտների մոնտաժումից հետո:
• Առաջին հերթին կատարվում է App-ից ազդեցությունը (console.log('2')), ապա Child-ից (console.log('4')):
• Այսպիսով, սինխրոնային լոգերը հետևում են ֆունկցիաների կանչման կարգին, իսկ ազդեցությունները կատարվում են ռենդերի հետո՝ ըստ դրանց հայտարարության կարգի: