[Solved] Computed properties in components seem to be leaking state

1

In this Twiddle I created a simple example of a component that has a computed property. The application controller simulates a model that has 2 instances and those instances are each passed to the component as a simple parameter. What I expected from this experiment was to have the first rendered component with the activity count as 1 and the other as 0.

living room - Activity 1 bedroom - Activity 0

but the actual result is

living room - Activity 1 bedroom - Activity 1

Am I missing something here? Thanks in advance.

2

Well yea, any properties in the extends hash is placed on the classes prototype. Now, this is fine if the property is immutable primitive value. But when you get an mutable object like array or object, all instances will share that object.

You need to wrap the array in a computes property to ensure each instance get its own array.

This is actually a pretty common mistake.

1 Like
3

Well this is quite embarrassing :joy:.

I should have done this:

messages: null,

init() {
  this._super(...arguments);
  this.set(messages, [ ]);
}

Thank you @lightblade for the heads up and the nice explanation!

1 Like
4

Here’s a relevant github issue that people may find helpful if they want further elaboration: Array property value shared between instances of a Component · Issue #3908 · emberjs/ember.js · GitHub