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')).

Така, синхронните логове следват реда на извикване на функциите, а ефектите — след рендерирането, в реда на тяхното обявяване.