Component Lifecycle Methods are not called in the correct order

Stencil version:

 @stencil/core@0.16.0

I'm submitting a:

[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://stencil-worldwide.herokuapp.com/ or https://forum.ionicframework.com/

Current behavior:

The lifecycle methods are not called in the correct order:
NOTE: I've changed CmpA (cmp-a) to CmpZ (cmp-z) which makes the bug appear more often

CmpD - a1-child client componentWillLoad
CmpD - a2-child client componentWillLoad
CmpD - a3-child client componentWillLoad
CmpD - a4-child client componentWillLoad
CmpB client componentWillLoad
CmpZ client componentWillLoad <--
CmpC client componentWillLoad
CmpD - c-child client componentWillLoad
CmpD - a1-child client componentDidLoad
CmpD - a2-child client componentDidLoad
CmpD - a3-child client componentDidLoad
CmpD - a4-child client componentDidLoad
CmpZ client componentDidLoad <--
CmpD - c-child client componentDidLoad
CmpC client componentDidLoad
CmpB client componentDidLoad

Fails in Chrome on Windows, Safari on macOS and iOS/iPhone, Chrome on Android.
IE11 and Edge has the correct hiarchy but childs are loaded reversed.

Expected behavior:

The lifecycle methods should be called in the same order on server and client.

CmpZ server componentWillLoad <--
CmpD - a1-child server componentWillLoad
CmpD - a2-child server componentWillLoad
CmpD - a3-child server componentWillLoad
CmpD - a4-child server componentWillLoad
CmpB server componentWillLoad
CmpC server componentWillLoad
CmpD - c-child server componentWillLoad
CmpD - a1-child server componentDidLoad
CmpD - a2-child server componentDidLoad
CmpD - a3-child server componentDidLoad
CmpD - a4-child server componentDidLoad
CmpD - c-child server componentDidLoad
CmpC server componentDidLoad
CmpB server componentDidLoad
CmpZ server componentDidLoad <--

Steps to reproduce:

Refresh the following page and compare the server, and client messages. They should be in the same order:
https://stencil-bug.firebaseapp.com/prerender-z/

Changing the prerender-test component "cmp-a" tag, to "cmp-z" makes the lifecycle methods to be called out of order. This is the original test:
https://stencil-bug.firebaseapp.com/prerender-a/

Related code:
PR for tests: #1266

Other information:

#1130

Added PR for tests: #1266

[DominicBoettger]

I can confirm this issue.
It is only a problem when using prerendering. The order without prerendered HTML seems to be correct.
This creates disturbing flickering for the user as the component data is empty in some cases.

[jarrvis]

Also confirming this issue.
This is blocking a bit normal usage of Redux with 'slot' components because child 'slot' components can be loaded before parent which means that Redux store which is initialized in parent componentWillLoad is not there yet available in child slot componentWillLoad

[DominicBoettger]

We checked the current codebase and then tried to find a solution for the order.

The current queue in the core.browser does not respect the need that a child component maybe needs data from a parent component. If the order should be correct it should maybe work like the dummy code below.

@adamdbradley My colleague @DanielTWalther and me tested that topic in the last days and came to the result that it's maybe necessary to rewrite the code in the core.browser to respect the order like in the dummy code below. What do you think about the topic and do you have plans for the queue mechanism in the core.browser?
If you want we can modify the core.browser so it works like the code below in the situation the page has been prerendered.

<a-test class="hydrated">
  <b-test class="hydrated">
    <div class="mytest">
      <c-test class="hydrated">
      </c-test>
      <d-test class="hydrated">
        <e-test class="hydrated">
        </e-test>
      </d-test>
    </div>
  </b-test>
</a-test>

const bodyEl = document.querySelectorAll('body > *');


const iterateBodyWillLoad = async function(bodyEl) {
	for(const el of bodyEl) {
		if(el.classList.contains('hydrate')) {
    	// exec viewWillLoad of component
      // await for viewWillLoad function
      console.log('willLoad: ' + el.nodeName)
    }
    if(el.children) {
    	// check for children and recursively iterate
      iterateBodyWillLoad(el.children);
    }
    if(el.classList.contains('hydrate')) {
        // exec render function
		    console.log('render: '+ el.nodeName);
    }
  }
}

iterateBodyWillLoad(bodyEl);

[jarrvis]

Well my opinion is that it would be the best. I'm currently doing sth similar in some sense to overcome the issue: looping recursively over parent's children in parent componentDidLoad and calling forceUpdate() on every Stencil component found to have some hook in child where parent is for sure initialized. But this is not the nicest and more of a temp solution. If you are able to change it I would definitely appreciate

[jarrvis]

Hey, I just found acceptable (for me) solution for my issue with Redux store not being available in slot components. assuming that the root component is 'known' to any other component I can do sth like:

  componentWillLoad() {
    document.querySelector("my-root-component").componentOnReady().then(() => {
      this.store.mapDispatchToProps(this, {
        getResources
      });
      this.store.mapStateToProps(this, state => {
        return {
          loading: state.payload.loading,
          resources: state.payload.resources,
          totalNoOfResources: state.payload.totalNoOfResources,
        }
      });
    }); 
  }

Thanks for sharing - that will work for me too 😄

You can use async/await to make it cleaner:

async componentWillLoad() {
    await document.querySelector("my-root-component").componentOnReady();
    ...
}

[EladBezalel]

It also affects if you try to maintain components hierarchy such as

<my-b>
	<my-b>
		<my-a>
		</my-a>
	</my-b>
</my-b>

When my-a and my-b both register to their parent my-b on componentWillLoad hook

current output

my-a will load // no my-b parent
my-a did load
my-b will load
my-b will load
my-b did load
my-b did load

expected

my-b will load
my-b will load
my-a will load
my-a did load
my-b did load
my-b did load

[jarrvis]

maybe this will help:
https://github.com/jarrvis/stencil-component-lifecycle-test

[f10l]

async componentWillLoad() {
    await document.querySelector("my-root-component").componentOnReady();
    ...
}

I tried using this, but sometimes it just crashes the app and the componentOnReady() seems to never finish.

[jarrvis]

@fanick-ber try with:

    document.querySelector("my-root-component").componentOnReady().then(() => {
         ...
      });

I also noticed that it breaks the app when root component was actually loaded before child. Did not analyze yet why but Promise#then works always for me

[jarrvis]

Funny thing is that its about the alphabetical order of component names:) You can check in that test repo that I linked