Component rerender even though property did not change

1

In my Ember app I recognized performance issues and found out that my components are rerendered even though the property did not change.

The component has only one attribute which is a computed property. The dependent value of the computed property did change but the result of the computed property is still the same. Therefore I thought that the component does not detect an attribute change.

As an example I created a short Ember Twiddle: Ember Twiddle

Is this behavior intentionally or do I misinterprete something?

1 Like
2

I think this is because your application controller calculates isBig each time:

isBig: Ember.computed('param', function() {
  return this.get('param') > 2;
})

Since it is your application controller which is at the “top” of the app, it affects everything downstream that follows from it. Every time the param changes, isBig recalculates and gets passed to both components, when both components render.

1 Like
3

Thanks for your fast response. I thought Ember’s magic is preventing such behavior but it looks like it isn’t.

The only option I came up so far is to use an observer to set the property only if a change happened:

isBig: false,
paramObserver: Ember.observer('param', function() {
  const oldValue = this.get('isBig');
  const param = this.get(‘param’);
  let newValue = param > 2;
  if (oldValue !== newValue) {
    this.set('isBig', newValue);
  }
})

But I read everywhere that observers are bad and I feel dirty to use this solution. Is there a better solution to prevent a rerender?

4

Take a look at Lauren Tan’s Ember Best Practices. I think you’ll find some guidance there.

1 Like