EmberJS - Component Lifecycle

The component's lifecycle contains three methods which execute according to the render scenario.

On Initial Render

  • init
  • didReceiveAttrs
  • willRender
  • didInsertElement
  • didRender

On Re-Render

  • didUpdateAttrs
  • didReceiveAttrs
  • willUpdate
  • willRender
  • didUpdate
  • didRender

On Component Destroy

  • willDestroyElement
  • willClearRender
  • didDestroyElement

The following table lists down the different ways of using lifecycle hooks within components −

S.No. Lifecycle Ways & Description
1 Attribute Change with didUpdateAttrs

The didUpdateAttrs hook can be used when the component's attributes have changed and called before re-rendering the component.
2 Attributes with didReceiveAttrs

The didReceiveAttrs hook can be used after the init method and called when the component's attributes are updated.
3 Third-Party Libraries with didInsertElement

You can initialize and attach the 3rd party libraries into the DOM element by using this hook.
4 Rendered DOM with didRender

The didRender hook is called to make update to the DOM when the template has rendered.
5 Detaching and Tearing Down with willDestroyElement

You can remove the component elements from the DOM by triggering the willDestroyElement hook.
emberjs_component.htm
Advertisements