Boost your Ember app performance with willDestroyElement() in components

• It's just a quick tip while can be extended vastly.

Components in Emberjs are reusable blocks of code which are so helpful in many aspects. However, Using them could be also bring some performance issue up if we don't follow it with the best practice.

Ember Components have different life cycle which two of the most important ones are: didInsertElement() and willDestroyElement()

Here is an example to set owlCarousel() up as an awesome slider:

export default Ember.Component.extend({
  didInsertElement(){
    this._super(...arguments);
    Ember.$('#main-slider').owlCarousel();
  },
  willDestroyElement(){
    this._super(...arguments);
    let owl = Ember.$('#main-slider');
    owl.trigger('destroy.owl.carousel');  
  }
});

In willDestroyElement() where I am destroying owl.trigger('destroy.owl.carousel'); is the important part to destroy that event while leaving component which run app in large scale more performant. I encourage you to learn more about current API of component's life cycle.