Confused about execution order

Question

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.

Answer 1

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.