Component lifecycle is not working properly

[ahmdhppy]

Hi Géry & Sam,

Thank you for building an awesome framework, it really helped us a lot to build a complex and dynamic app.

The issue is the onMounted hook is not executed in specific circumstance and the order of hooks execution is wrong.

Copy the below code to OWL playground then run it.

JS

import {
    Component,
    useState,
    mount,
    useComponent,
    onWillStart,
    onMounted,
    onPatched,
    onWillPatch,
    onWillRender,
    onRendered,
} from "@odoo/owl";
  
function useLogLifecycle() {
    const component = useComponent();
    const name = component.constructor.name;
    onWillStart(() => console.log(`${name}:willStart`));
    onMounted(() => console.log(`${name}:mounted`));
    onWillRender(() => console.log(`${name}:willRender`));
    onRendered(() => console.log(`${name}:rendered`));
    onWillPatch(() => console.log(`${name}:willPatch`));
    onPatched(() => console.log(`${name}:patched`));
}

class Greeter extends Component {
    static template = "Greeter";
    setup() {
         useLogLifecycle()
    }
}

class Root extends Component {
    static components = { Greeter };
    static template = "Root"
    setup() {
        useLogLifecycle()
        this.state = useState({showGreeter:false});
        onMounted(() => this.state.showGreeter = true);
    }
}

mount(Root, document.body, { templates: TEMPLATES, dev: true });

XML

<templates>
  <t t-name="Greeter">
    <p>Greeter</p>
  </t>

  <t t-name="Root">
    <t t-call="checkShow">
      <Greeter/>
    </t>
  </t>

  <t t-name="checkShow">
        <t t-if="this.state.showGreeter === true">
            <t t-out="0" />
        </t>
    </t>
</templates>

You will see in the console the below output:

Root:willStart
Root:willRender
Greeter:willStart
Root:rendered
Greeter:willRender
Greeter:rendered
Root:mounted
Root:willRender
Root:rendered
Root:willPatch
Root:patched

The issue here is "Greeter:mounted" is not logged, also we expect the logs that related to Greeter should be logged after "Root:mounted" since we set the the show flag in Root onMounted hook.

The issue is happened when add the if statement in the sub template, if we change the Root template as below, everything will work properly:

<t t-name="Root">
    <t t-if="this.state.showGreeter === true">
      <Greeter/>
    </t>
  </t>

[sdegueldre]

Interesting, looks like components in the body of t-call are always rendered, I suppose we didn't ever really fully treat the case of using components in t-call body and it causes all kinds of weirdness.

[ahmdhppy]

@sdegueldre do you expect to solve the issue soon? If not, then we will change our implementation to use inheritance as a workaround. I didn't test it with inheritance 😁, but I guess it will work as expected.

As you mentioned OWL is always render the t-call body that is way the order of hooks execution is wrong, but the strange is why the onMounted hook is not executed?

[sdegueldre]

I'm no longer working in the R&D department so I don't really have the bandwidth to dedicate much time to work on Owl beyond triage. @ged-odoo is off until next week.

Even then, the fact that this issue has been present for a long time and hasn't been reported until now indicates that it's probably a pretty niche issue. On top of that, from my current understanding of what's involved, it may require a fix very deep in the Owl internals with potentially far reaching implications, so I think if there's a fix it's likely to take a while, and it's even possible that a fix is impossible without breaking other things, though that will require someone to take a deeper look.

With that in mind, I would advise to work around the issue for now if you can.

[ged-odoo]

interesting. we clearly do not use much t-call and t-out="0" in owl. they were implemented to have as much of qweb as possible, but this kind of usecases is usually done with higher order components and slots.

Still, it looks like a bug indeed. We'll see if we can fix it, but it may take some time.