Skip to content

Latest commit

 

History

History
75 lines (56 loc) · 2.26 KB

no-component-lifecycle-hooks.md

File metadata and controls

75 lines (56 loc) · 2.26 KB

no-component-lifecycle-hooks

✅ The "extends": "plugin:ember/recommended" property in a configuration file enables this rule.

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() {}
  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() {
    super();
  }
  willDestroy() {}
}

Further Reading