Thursday, 5 November 2020

What is determining the order in which these components' 'mount' functions execute?

In my code, app is the highest (functional) component. It renders piggybank (which is a class component) which renders piggychild (which is a functional component).

Each component 'console.logs' the name of itself (in the render method for class-component; simply in the function for a functional component) and has a 'mount' function (for the class-component, this means a componentDidMount method; for functional component, this means a useEffect hook whose callback's 2nd parameter is an empty array) which logs 'mount' to the console.

enter image description here


As you can see in the picture, PiggyBank's mount fires first, then PiggyChild's, then App's.

Is there a rule in React that governs the order in which components' 'mount' functions occur?

Or is it enough to just know that mount functions occur after all components are rendered?



from What is determining the order in which these components' 'mount' functions execute?

No comments:

Post a Comment