ember/no-component-lifecycle-hooks

November 8, 2022 · View on GitHub

💼 This rule is enabled in the ✅ recommended config.

Disallow usage of "classic" ember component lifecycle hooks.

Rule Details

As most component lifecycle hooks are gone in glimmer components, this rule aims to:

  • remind the developer that classic Ember component lifecycle hooks no longer exist in glimmer components
  • encourage migrating away from classic Ember component lifecycle hooks in classic ember components

Custom functional modifiers or @ember/render-modifiers should be used instead.

Examples

Examples of incorrect code for this rule:

import Component from '@ember/component';

export default class MyComponent extends Component {
  // Classic Ember component lifecycle hooks (minus willDestroy which is also a Glimmer component lifecycle hook):
  didDestroyElement() {}
  didInsertElement() {}
  didReceiveAttrs() {}
  didRender() {}
  didUpdate() {}
  didUpdateAttrs() {}
  willClearRender() {}
  willDestroyElement() {}
  willInsertElement() {}
  willRender() {}
  willUpdate() {}
}

import GlimmerComponent from '@glimmer/component';

export default class MyComponent extends GlimmerComponent {
  didInsertElement() {} // This is a classic Ember component lifecycle hook which can't be used in a Glimmer component.
}

Examples of correct code for this rule:

import Component from '@ember/component';

export default class MyComponent extends Component {
  init(...args) {
    this._super(...args);
  }
  willDestroy() {} // Both a classic and Glimmer component lifecycle hook
}

import GlimmerComponent from '@glimmer/component';

export default class MyComponent extends GlimmerComponent {
  // Glimmer component lifecycle hooks:
  constructor(...args) {
    super(...args);
  }
  willDestroy() {}
}

Further Reading