CODEWITHSUNDEEP
reactjs
Sam
Sam

Reputation: 30292

Confused about execution order

In my react app, I have an app.jsx component in which I perform basic functions such as getting window size, read user info by calling an API function, etc.

This is really the top level component at the entry point. This is what my entry point looks like:

render (
    <Provider store={store}>
        <App>
            <HomePageComponent />
        </App>
    </Provider>,
    document.getElementById('app')
);

What I'm confused about is that in the home page component, I have a bunch of sub components. Looks like the componentDidMount() function of a sub component inside the home page is executing before the componentDidMount() function of the App component.

Is this the way it is supposed to work? From the inside out? I was putting some basic house keeping functions like getting user info inside the App component thinking it would execute first.

Upvotes: 4

Views: 2832

Answers (3)

maxedison
maxedison

Reputation: 17573

Yes, this is the way it's supposed to work. This isn't a React issue so much as a JSX one. JSX just transforms into function calls. For example, your code turns into:

React.createElement(
    Provider,
    { store: store },
    React.createElement(
        App,
        null,
        React.createElement(HomePageComponent, null)
    )
);

It's just like the following:

doSomethingSecond(doSomethingFirst());

In that example, doSomethingFirst will execute first, and the result will be passed as an argument to doSomethingSecond. Similarly, in the JSX-transformed code, React.createElement(HomePageComponent, null) will execute first, and the result will be passed as an argument to the wrapping React.createelement call, and so on.

You can get a better sense of how JSX is turned into JS on Babel's site.

Upvotes: 2

Abdul Hameed
Abdul Hameed

Reputation: 103

Use

constructor() method to load initial operations for your cookings. later provide your componentDidMount() operations and so on..

For better understanding see React Component Life Cycle

Upvotes: 0

ivarni
ivarni

Reputation: 17878

Yes, this is expected behaviour. There's a discussion about it in this issue.

Some highlights:

If componentDidMount executed parent-first, the only thing you'd find there is your node, because all child nodes have not been mounted by this moment. This makes componentDidMount useless for majority of use cases (e.g. counting offsetWidth, attaching third-party non-React plugins, etc). (gaearon)

It's not a bug but maybe confusing docs. It's the creation order of the DOM elements. It has nothing to do with being in the document or not, since we cannot guarantee that anyway (since the root may be out of the document). (sebmarkbage)

Technically the life-cycle methods only guarantee that your particular component is mounted. It doesn't make any promises with regard to it's children. Relying on this order is usually indication that you're breaking the encapsulation boundaries of components. (sebmarkbage)

Upvotes: 1

Related Questions