React: Children component mounted before parent compoent.

[code-artisan]

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.

[milesj]

What @gaearon said is true, the child mount events fire before the parents. The lifecycle can be seen here: https://github.com/facebook/react/blob/master/src/renderers/shared/reconciler/ReactCompositeComponent.js#L50

[code-artisan]

Yeah, understand, thank you.

[JadSayegh]

Is there a known way around this? In case we don't want the child to mount before the first parent render call?

[locomotif]

@JadSayegh I may not be correct, but you could use componentWillMount to set state on a prop that can be persisted to your child component. e.g <ChildComponent active={this.state.active} />; then I assume your child can just return null when not active. Once you parent is mounted and render, then update the active state to true.

[YozhEzhi]

@gaearon componentWillMount is deprecated now.
How could I deal with API-method that I want to call before children mounting?

Now I'm using componentDidMount.
So my API sequence is: deepest child -> child -> parent.
But I need sequence to be: parent -> child -> deepest child.

[gaearon]

Please explain in more detail why you need this.

If it’s just for some kind of bookkeeping, you can move that logic into constructor. Effectively componentWillMount was nearly equivalent to a constructor.

Doing side effects there is not supported though. It’s hard to say more without seeing what you’re actually trying to do and why.

[YozhEzhi]

@gaearon Thanks for advice to use constructor! It works.

The case: Our parent component should to make getBaseUrl api request to get path to rest-api server.
So, when parents' children are mounting - they should to know about those path to rest-api.

Anyway, you fixed my problem :)

[shaggy34]

On Sat, May 12, 2018 at 7:43 AM YozhEzhi [e-mail] wrote:

R@gaearon https://github.com/gaearon Thanks for advice to use
constructor! cIt works.

The case: Our Issuer's employer identification number (EIN): 06-1515824 r
c component should to make rgetBaseUrl api request to get path to
rest-api server.c
So, when parents' children are mounting - they should to know about those
path to rest-api.

Anyway, you fixed my problem :)

—
You are receiving Rthis because you are subscribed to this thread.crc
Reply to this email directly, view it on GitHub
https://github.com/facebook/react/issues/5737#issuecomment-388552637,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AJPWRMozBr8ihoiXQWhUgDTelrRyrbYZks5txtjngaJpZM4G7dPA
.

rr

Sent from Gmail Mobile

[gaearon]

@YozhEzhi

I don’t understand why you’d need to rely on order there though. Calculate those paths and pass them down as props. Or use context if you don’t want to pass them down explicitly.

[sabrinaluo]

hello @gaearon , I actually encountered the same issue.

How could I deal with API-method that I want to call before children mounting?

Now I'm using componentDidMount.
So my API sequence is: deepest child -> child -> parent.
But I need sequence to be: parent -> child -> deepest child.

As @YozhEzhi mentioned above, I want the sequence to be parent -> child -> deepest child
However, the difference is, my issue is not API related but need the window instead.

I'm implementing doubleclick ads, the simplified structure would be:

• pageComp
  
  
  
  • adComp1
  
  
  • adComp2
  
  

What I want is to setup the general config in pageComp first, then defineSlot for each adComp

The issue is:

• window.googletag is only available after componentDidMount
• config should be setup before doing any other stuff

Do you have any suggestion? Thank you in advance.

[Sebastian-Nielsen]

Question related to this topic

If the children takes longer to load due to e.g. api calls and promises, will the parent then mount as soon as it is ready without waiting for the child to finish first? - and then rerender when the child is finished? Or how does it work?

The link is broken @milesj

[gaearon]

In React components don't "wait" for each other. There is a feature planned that addresses this (you might have heard of "suspense") but it's not available yet.

So yes, both the child and parent normally mount immediately. There is no notion of child "finishing" today in React. If you mean that your child returned null or a spinner, that still counts as having rendered.

When the child calls setState later (e.g. when data is ready), the child alone re-renders.

[brandonparis]

@gaearon hello! I'm having similar issues I think, but in my case it's happening when I try to fire an action within the useEffect hook defined at the entry point for my application. Lower in the component tree, I'm using the useEffect hook to make API calls that use a crucial piece of data being retrieved in the entry point I described. It seems that I would not want to move the fetching of that crucial piece of data down and into every child component that needs it. Thoughts on this? Am I using an anti-pattern here?

[ryansully]

@Brandonprs Your particular use case has more discussion here: https://github.com/facebook/react/issues/15281

[phatNfqAsia]

Hi @gaearon,
Now that we have hooks and move on to adapt more function components
But the problem is that there no equivalent hooks for doing constructor

Is it correct? If yes, are you guys planning to make one?

[ervikashkumar]

@gaearon componentWillMount is deprecated now.
How could I deal with API-method that I want to call _before_ children mounting?

Now I'm using componentDidMount.
So my API sequence is: deepest child -> child -> parent.
But I need sequence to be: parent -> child -> deepest child.

I am also facing the same issue ,but with hooks, There is no constructor even .

[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