Which hook in components is best practise for teardown?

All the previous topics seem out of date and inaccurate resurrecting topic.

In a component where do we tear down Dom events / jQuery listeners? willDestroyElement or willDestroy ?

  • Glimmer components do not have a willDestroyElement hook.
  • API docs say willDestroy is for teardown and leave willDestroyElement vague and unhelpful.
  • Guides specifically call out willDestroyElement and do not offer willDestroy as a lifecycle hook.

Trying to settle a debate at work. Thankx

Unfortunately, this is a slightly mixed story, as you can see using this Twiddle: the guides recommend what they do because the element is destroyed by the time willDestroy runs. This means that if you don’t tear down event listeners during willDestroyElement and you haven’t saved a reference to them to remove in some other way, you’re going to leak that event listener. This is why the existing guides are written the way they are.

However, if instead you are using outerHTML semantics (via tagName in Ember components, or as the only way in Glimmer components), there is no such this.element—you have to use various other workarounds to track any event listeners you set up and make sure they’re disposed of correctly.

By and large, the need for the hook is largely eliminated by the use of template-side constructs, though: setting up handlers with the {{on}} element modifier means they’ll be automatically torn down when that section of the component tree is removed, for any reason. If you’re using that pattern, you basically don’t have to worry about the kinds of concerns you normally put into willDestroy or willDestroyElement at all: you get the right behavior for “free” as a developer.

In Glimmer Components, using {{on}} is really your only option!

So, if you must use it in an Ember Component, you should use willDestroyElement—but you’re better off migrating that component to have outerHTML semantics and using the {{on}} modifier (once you’re on Ember 3.11)!

5 Likes

Thank you. You articulated that better then I could have imagined.

1 Like