-
-
Notifications
You must be signed in to change notification settings - Fork 4.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Infinite revalidation
bug error thrown in willDestroyElement calls if we set any parent properties inside it in Ember versions higher than 5.5.0
#20707
Comments
Infinite revalidation
bug error thrown in willDestroyElement calls in Ember versions higher than 5.5.0 Infinite revalidation
bug error thrown in willDestroyElement calls if we set any parent properties inside it in Ember versions higher than 5.5.0
Thanks for the reproduction! after looking through your code, it seems like you don't want destruction to auto-track. @action
toggleChild() {
setProperties(this, { showChild: !this.showChild });
} to @action
async toggleChild() {
await 0
setProperties(this, { showChild: !this.showChild });
} |
Discussed in discord, an alternative is to switch to |
Won't it cause any issue if we use |
why would it? -- it exists in classic components |
I believe switching to |
Do we expicitly set the |
it'll be cleaned up, all handled by the framework <3 |
Yeah. I'm asking can we able to access the |
I don't recall, that'd be a good thing to try -- what is |
I don't believe the element is available in |
Thank you for the reproduction, I've put it all in a gjs file over here: https://github.com/NullVoxPopuli/repro-destruction-tracking import Route from 'ember-route-template';
import { Labelled } from './components/labelled';
import { tracked } from '@glimmer/tracking';
import { on } from '@ember/modifier';
import EmberComponent from '@ember/component';
import Component from '@glimmer/component';
class Child extends EmberComponent {
willDestroyElement() {
super.willDestroyElement();
this.incrementWillDestroy();
}
<template>
<Labelled @name="Child">
<p>Child Rendered</p>
</Labelled>
</template>
}
class Example extends EmberComponent {
@tracked showChild = true;
toggleChild = () => {
this.showChild = !this.showChild;
};
<template>
<Labelled @name="Example">
<p>willDestroyCalls: {{this.willDestroyCalls}}</p>
<button {{on "click" this.toggleChild}}>Toggle child</button>
{{#if this.showChild}}
<Child @incrementWillDestroy={{this.incrementWillDestroy}} />
{{/if}}
</Labelled>
</template>
}
// Repro from
// https://github.com/tamil-arasu849/ember-lifecycle-hook-bug-repo/blob/main/app/templates/application.hbs
class Demo extends Component {
@tracked willDestroyCalls = 0;
increment = () => this.willDestroyCalls++;
<template>
<Labelled @name="Demo">
<Example
@incrementWillDestroy={{this.increment}}
@willDestroyCalls={{this.willDestroyCalls}}
/>
</Labelled>
</template>
}
export default Route(Demo); |
What's interesting is that if I remove the middle component, both 5.5 and 5.6+ error import Route from 'ember-route-template';
import { Labelled } from './components/labelled';
import { tracked } from '@glimmer/tracking';
import { on } from '@ember/modifier';
import EmberComponent from '@ember/component';
import Component from '@glimmer/component';
class Child extends EmberComponent {
willDestroyElement() {
super.willDestroyElement();
this.incrementWillDestroy();
}
<template>
<Labelled @name="Child">
<p>Child Rendered</p>
</Labelled>
</template>
}
// Repro from
// https://github.com/tamil-arasu849/ember-lifecycle-hook-bug-repo/blob/main/app/templates/application.hbs
class Demo extends Component {
@tracked willDestroyCalls = 0;
increment = () => this.willDestroyCalls++;
@tracked showChild = true;
toggleChild = () => {
this.showChild = !this.showChild;
};
<template>
<Labelled @name="Demo">
<p>willDestroyCalls: {{this.willDestroyCalls}}</p>
<button {{on "click" this.toggleChild}}>Toggle child</button>
{{#if this.showChild}}
<Child @incrementWillDestroy={{this.increment}} />
{{/if}}
</Labelled>
</template>
}
export default Route(Demo); So something about that middle |
Good news -- switching to constructor(...args) {
super(...args);
registerDestructor(this, () => {
this.args.incrementWillDestroy();
});
} is a good way to migrate away from this problem. |
Yeah. We used |
@NullVoxPopuli Does |
It does, ya. And is async, so it would avoid the problem altogether (Sync destruction is the problem here, so i don't think we have a bug) |
It is a bug in that code that worked in 5.4 doesn't work in >= 5.5 |
I think the bug is that it ever worked at all |
We recently upgraded our ember application from version 3.28 to v5.9.0. After upgrade some cleanup operations using
willDestroyElement
calls in ember component throws infinite revalidation bug error, but when we usewillDestroy
method orregisterDestructor
function, this issue doesn't occur.We found that this issue is present in ember versions starting from v5.6.0. But upto v5.5.0 this issue isn't there.
I've tried to reproduce the bug in the repo https://github.com/tamil-arasu849/ember-lifecycle-hook-bug-repo.
The app will throw the below error when toggling the child component. But downgrading the version to v5.5.0 or lower fixes this issue
This bug breaks many of our existing components
The text was updated successfully, but these errors were encountered: