avoid-leaking-state-in-ember-objects.md

ember/avoid-leaking-state-in-ember-objects

💼 This rule is enabled in the ✅ recommended config.

Don't use arrays and objects as default properties in classic classes or mixins. In native classes, it is safe to assign objects to fields.

Examples

Examples of incorrect code for this rule:

export default Foo.extend({
  items: [],

  actions: {
    addItem(item) {
      this.items.pushObject(item);
    }
  }
});

import Mixin from '@ember/object/mixin';

export default Mixin.create({
  items: []
});

Examples of correct code for this rule:

export default Foo.extend({
  init(...args) {
    this._super(...args);

    this.items = this.items || [];
  },

  actions: {
    addItem(item) {
      this.items.pushObject(item);
    }
  }
});

import Component from '@glimmer/component';
import { action } from '@ember/object';

export default class FooComponent extends Component {
  items = [];

  @action
  addItem(item) {
    this.items = [...this.items, item];
  }
}

Configuration

If you have custom properties where you know that the shared state won't be a problem (for example, read-only configuration values), you can configure this rule to ignore them by passing the property names to the rule as follows. Note that this rule will always automatically ignore known-safe Ember properties such as actions.

module.exports = {
  rules: {
    'ember/avoid-leaking-state-in-ember-objects': [
      'error',
      ['array', 'of', 'ignored', 'properties']
    ]
  }
};

References

• Dockyard blog
• Ember native classes guides
• ember-native-class-codemod