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