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')) иҷро мешавад.

Бинобар ин, логҳои синхронӣ дар тартиби даъвати функсияҳо мераванд, ва эффектҳо пас аз рендер, дар тартиби эълоншудаи онҳо иҷро мешаванд.