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

Design
1

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?.

Note:

2

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

3

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.

4

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?

5

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.