0

Child component property update is triggering all the parent component willUpdate,willRender,didUpdate and didRender life cycle hook methods. but I just updated property which is visible only the child component, It has nothing to do with parent component.

Twiddle to check.
Twiddle to check with powerselect - when mouse over dropdown option it's triggering the all of its parent component willUpdate,willRender,didUpdate and didRender life cycle hook methods.

Is there any way I can avoid this behavior?. [I tried with/without this._super(...arguments)]

PS: The reason is, I am doing some heavy operation in didRender hook of the parent component I don't want to run this unnecessarily. (One solution I can think of is manually checking for the specific property alone is changed or not by myself and run the heavy operation upon the condition).

Ember Freak
  • 12,918
  • 4
  • 24
  • 54
  • 1
    Is there any specific reason to use `didRender` and not `didInsertElement`? I don't think that it is possible to avoid `didRender`, while `didInsertElement` is called only on initial render. If you need to perform that heavy operations on each re-render, I don't see other way than manually checking for the specific properties. Using observer may be a solution too. – Gennady Dogaev Jun 17 '17 at 15:44
  • Thank you for the comment, I am doing some jquery UI resizeable related stuff table header for in didRender hook, I am started to wondering what does it mean calling `(this._super(...arguments)` for all life cycle hook methods. In this [answer](https://stackoverflow.com/questions/41011165/ember-component-life-cycle-hook-method-is-it-mandatory-to-call-super) Most of them said to include it, but if they called automatically then there is no point in calling super) – Ember Freak Jun 17 '17 at 16:17
  • 1
    I never call `this._super` in lifecycle hooks except cases when one component extends other component. If component B extends component A and both of them need to implement `didRender` hook, component B must call `this._super` in its `didRender` in order to execute code of A's `didRender`. Otherwise `this._super` will do nothing because as you can see [here](https://github.com/emberjs/ember.js/blob/v2.12.0/packages/ember-glimmer/lib/component.js#L729), `Ember.Component` does not implement `didRender`. – Gennady Dogaev Jun 17 '17 at 17:06
  • 1
    I was surprised when I saw the parent's hooks are running after clicking the child's button! They shouldn't be run. I've changed the dependencies to ember 2.9.1 in your twiddle and see it is working as we supposed to! (You can verify it by changing it from the *dependencies* menu.) I guess, this behaviour was came with glimmer 2. Maybe this is a bug or a feature of glimmer 2. We should ask it in slack or github to the core team. – ykaragol Jun 17 '17 at 21:30
  • By the way, I think nothing wrong with your use cases. I'm also using the same hooks in my data-tables. (to make the tables resizable and to add a `title`property to all `th` cells.) Whenever a cell value changed, then this hooks of table will run at ember 2.12! – ykaragol Jun 17 '17 at 21:37
  • @kumkanillam i am highly suspicious about a situation in our code base that we are having a crazy rerendering of parent component as in your case and it completely ruins our application. did you open an issue for ember regarding this? – Ahmet Emre Kilinc Jul 21 '17 at 13:43
  • @AhmetEmreKılınç I haven't opened the issue, but I asked it in [discussion](https://discuss.emberjs.com/t/ember-parent-child-component-how-to-avoid-unnecessary-life-cycle-hook-from-triggering/13195). You please do it. Actually this is the expected behavior. You can refer [this](https://github.com/emberjs/ember.js/issues/13947) and [this](https://github.com/emberjs/ember.js/pull/14222) – Ember Freak Jul 21 '17 at 14:05

0 Answers0