0
270
ViewsReact 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>)
}
1 answers
Answer question0
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
