Ember parent child component, how to avoid unnecessary life cycle hook from triggering?

I have the below component structure in my app, table-model > header-top > generic-filter > attribute-component-design > psdropdown-with-enums-vertical-collection > power-select-multiple > customized options component.

When I mouse over the power-select drop down, its triggering the all of the parents willUpdate,willRender,didUpdate,didRender life cycle component methods.

The problem is, I do have some jquery-ui plugin usage which forces me to write some heavy operation for didRender of the some of the components.

What is wrong with my approach? and how can I avoid this unnecessary life cycle hook method from triggering?.


I’m waiting for solution too. By the way , did you try return false at the end of these hook?

I don’t think return false will have impact here but then I tried it and its not stopping the call. On re-renderting this is the order they are executing the hooks,
willUpdate,willRender called first parent component and then child component.
after that
didUpdate,didRender called first child component and then parent component.

You probably shouldn’t be doing jquery-ui stuff on didRender. It’s hard to say in detail, but this can probably be re-written to a combination of didInsertElement, using actions and/or observers. E.g. why must that jquery-ui function be called on each and every rerender? I’m guessing it will probably only need to rerender if certain properties that affect it change?

I am using jquery ui resizeable widget with my own customization for table header. I am using reportId as dynamic segment, when reportId is changing or user is adding/removing the header column alone it has re-render but the remaining time it’s not necessary.
I can do something like watching for those changes alone. But in general, I think, I should be very careful before writing anything in willUpdate,willRender,didUpdate,didRender since that will be called unnoticeably.