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

Bu kodu konsolda çalıştırdığınızda çıktı sırası şu şekilde olacaktır:

1
3
2
4

Açıklama:

• App bileşeni render edilirken önce console.log('1') çalışır.
• Ardından, Child bileşeni render edilir ve burada console.log('3') çağrılır.
• Render tamamlandıktan sonra React, useEffect efektlerini tanımlandıkları sırayla çağırır, ancak sadece bileşenler monte edildikten sonra.
• İlk olarak App'den (console.log('2')), sonra Child'den (console.log('4')) efektler çalışır.

Bu şekilde, senkron loglar fonksiyon çağrı sırasını takip ederken, efektler render sonrası ve tanımlandıkları sırayla çalışır.