cgajzg
Last Updated: May 15, 2019
·
706
· mhadaily

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.

3 Responses
Add your response

30423

There is no doubt Performance issue is a biggest issue as I understand as a writer of https://www.DissertationPlus.co.uk/ but I aim matters.

9 months ago ·
31471

Using such kind of components, you can easily do things well especially when there are some other management techniques are there to be followed. https://www.theacademicpapers.co.uk/coursework-writing-service.php

5 months ago ·
32231

Harry ramos is a multi talented guy, passionate blogger and a creative content writer and also providing dissertation writing services and help in uk. https://www.ukessaytigers.co.uk/dissertation-writing-services.php

about 2 months ago ·