`@tracked`

Marks a class field as reactive so the UI updates when it changes.

Since Ember 4/5 (Octane) Spec ↗

Syntax

@tracked fieldName = initialValue;

Returns

PropertyDecorator — A decorator applied to a class field.

Examples

import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';

export default class CartComponent extends Component {
  @tracked items = [];

  get total() {
    return this.items.reduce((sum, i) => sum + i.price, 0);
  }

  add(item) {
    this.items = [...this.items, item];
  }
}

Notes

Reassign tracked values rather than mutating in place (use a new array instead of push) so dependent getters recompute. Derived state should be plain getters; they re-run automatically when tracked deps change.