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')) ეფექტი.
• ამგვარად, სინქრონული ლოგები მიჰყვება ფუნქციების გამოძახების წესს, ხოლო ეფექტები — რენდერების შემდეგ, მათი გამოცხადების წესით.