did-insert and Render Modifiers

The render-modifiers addon provides did-insert, did-update, and will-destroy modifiers for imperative DOM work.

4 min read Level 3/5 #ember#modifiers#dom

What you'll learn

Install the ember/render-modifiers package
Use the did-insert modifier to run setup code
Clean up with the will-destroy modifier

Octane removed didInsertElement. Instead, the @ember/render-modifiers addon ships three element-level lifecycle modifiers: did-insert, did-update, and will-destroy. Most new apps include it by default.

Setup

ember install @ember/render-modifiers

Insert and Destroy

<div
  {{did-insert this.setup}}
  {{will-destroy this.teardown}}
>
  ...
</div>

import { action } from '@ember/object';

@action
setup(element) {
  this.observer = new IntersectionObserver(this.onIntersect);
  this.observer.observe(element);
}

@action
teardown(element) {
  this.observer.disconnect();
}

The first arg is always the DOM element. Any positional or named args you pass in the template come after.

Reacting To Changes

did-update re-runs when any of its positional/named args change:

<canvas {{did-insert this.draw}} {{did-update this.draw @data}} />

When @data changes, this.draw runs again with the new value.

When To Reach For A Custom Modifier

Render modifiers are great for one-off DOM glue. For reusable, stateful behavior (like a sortable list or focus trap), build a class-based modifier with ember-modifier instead — it gets its own teardown hooks and tracked args.

Component Args — @arg →