Children component mounted before parent compoent.

Hi there. Here is my page:

I want get host detail from main view.

I think it’s should be Main view mounted... --> Drill view mounted..., but actually, it’s Drill view mounted... --> Main view mounted....

[gaearon]

As far as I know this is expected. By the time componentDidMount fires you can do DOM manipulation so it makes sense that parent only receives it after children are mounted. That said you can use componentWillMount which fires in the opposite direction, parents first.

[xgqfrms]

a live demo

react-parent-child-lifecycle-order

https://33qrr.csb.app/

https://codesandbox.io/s/react-parent-child-lifecycle-order-33qrr

create order

parent constructor
parent WillMount
parent render

child constructor
child WillMount
child render
child DidMount

parent DidMount

destroy order

parent WillUnmount

child WillUnmount

// child unmount

// parent unmount