CODEWITHSUNDEEP
javascriptreactjsreact-hooks
Robert
Robert

Reputation: 10390

React hooks child component useEffect executes first, before parent component

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(/[^a-z]+/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>)
}

enter image description here

Upvotes: 6

Views: 7385

Answers (1)

Yichz
Yichz

Reputation: 9671

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. enter image description here

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

enter image description here

Upvotes: 8

Related Questions