React hooks child component useEffect executes first, before parent component

Question

I' learning about react hooks useEffect and I'm confused on the order of execution of useEffect. In the console it tells me that the ChildComponent "child component" console.log was executed first, then the "on mount" useEffect, and lastly the "parent component" was logged. I was expecting "on mount" to be logged first, then "parent component", and lastly the "child component". Can anyone explain why the child logs first, or why things execute this way?

Fields is a simple array of objects

const fields = [
    {
        id    : 'month',
        title : 'Month'
    },
    {
        id    : 'amount',
        title : 'Amount'
    },
    {
        id    : 'year',
        title : 'Year'
    },
];

 import React, { useEffect, useState } from 'react'; export default function ParentComponent(props) { const [fields, setFields] = useState(props.fields || []); useEffect(() => { console.log('on mount'); }, []); useEffect(() => { console.log('parent component'); }, [fields]); function randomString() { return Math.random().toString(36).replace(/[^az]+/g, '').substr(0, 5); } return ( <div> <button onClick={() => setFields([...fields,...[{id: randomString(), title: randomString()}]])} >Change field</button> <ChildComponent fields={fields}/> </div> ); } function ChildComponent(props) { useEffect(() => { console.log('child component') }, [props.fields]); return (<div> {props.fields.map(({ id, title }) => <div key={id} className="field">{title}</div>)} </div>) }

Answer 1

It's the same as javascript event bubbling which means when it runs, it calls all the ParentComponent functions, which will call and render ChildComponent , once the inner-est function is called (child rendered) it will bubble up to the top again, which now the ParentComponent's useEffect kicks in and will be in order.

I have modified a bit your code, so you can see more the order I'm referring https://codesandbox.io/s/silly-jennings-9hwwv?file=/src/App.js