jsschools
@ember/render-modifiers

did-insert, did-update, will-destroy — Already Built

@ember/render-modifiers

A small set of render lifecycle modifiers ships in @ember/render-modifiers and covers most imperative needs.

4 min read Level 2/5 #ember#modifiers#lifecycle
What you'll learn
  • Use did-insert to run setup code on mount
  • Use will-destroy to run teardown before removal
  • Use did-update to react to changing args

@ember/render-modifiers ships three tiny modifiers that cover the most common imperative needs: setup, update, and teardown.

Install

ember install @ember/render-modifiers

It is included by default in new Octane apps.

did-insert

Runs once when the element is inserted. The handler receives the element plus any positional args.

<canvas
  {{did-insert this.initChart}}
></canvas>
@action
initChart(element) {
  this.chart = new Chart(element, this.config);
}

did-update

Re-runs when any of its arguments change — perfect for syncing imperative state with reactive data.

<canvas
  {{did-insert this.initChart}}
  {{did-update this.updateChart this.data}}
></canvas>

will-destroy

Runs right before the element is removed — for cleanup of intervals, listeners, or library instances.

<canvas
  {{did-insert this.initChart}}
  {{did-update this.updateChart this.data}}
  {{will-destroy this.destroyChart}}
></canvas>
@action
destroyChart() {
  this.chart?.destroy();
}

For more complex needs, write a real modifier with ember-modifier.

Accessibility →