6

This probably a very basic question but the developer guide says:

Without using @track, the framework observes changes that assign a new value to the field. If the new value is not === to the previous value, the component re-renders.

Now since the previous value is compared to the new value using the === operator, shouldn't it return false if the any change is made to the value of any of the properties of an object? Why is it so that the template re-renders if all the properties of the object are altered but if any one of them is changed then the change is not registered.

12

The Javascript Strict Equality Operator (===) uses the Strict Equality Comparison Algorithm defined in the ECMAScript standard. Among other rules is the provision (from the MDN link),

If both operands are objects, return true only if they refer to the same object.

This is not the same as "deep equality", i.e., comparing all properties of an object. If you change one property of an object, it is still the same object.

From a performance standpoint, === checking means the framework only need to check if the "top level" properties a component have changed. @track tells the framework to "drill-down" to the properties (or array elements) of that "top-level" property.

Consider an example:

let obj1 = {firstName: 'John', lastName: 'Smith'};
let obj2 = {firstName: 'John', lastName: 'Smith'};

Even though these two variables have the same properties with the same values, they are two different objects. A change to obj1.firstName will have no effect on obj2.firstName. This is because Javascript literal object notation creates a new object - it's a shortcut for new Object() followed by property assignments. It's important to remember that obj1 and obj2 are essentially names for the memory where the actual objects' data is stored, and each names a different place in memory.

However, if I then write:

obj2 = obj1;

Now I've changed obj2 (the name) to refer to the same place in memory where obj1 is stored. They now both reference the same object, and any change to obj1.firstName will be reflected by obj2.firstName - they are now two names for the same object - the same place in memory.

Going back to the original question, if you have a property on your component which holds an object, then a change to one or more of the object's properties does not change what object that property holds - it doesn't change the place in memory where it is stored. But assigning directly to that property does change which object is named by that property.

this.owner.firstName = 'John';      // this.owner is still the same object
this.owner = {firstName = 'John'};  // this.owner is now a different object

The second line above changes which object is named by this.owner, and will always be reactive. The first line doesn't change which object is named, only some property of that object. This change is only reactive when owner is annotated with @track.

5
  • So, if I understand correctly, if my object has two properties (say firstName and lastName) and I edit both of them, an entirely new object would be created?. Also if I change only one of the properties, the value of that property in the old object itself would be changed (instead of a new object being created)? May 15 at 16:04
  • Changing properties of an object does not mean you have a new object, but it has updated state.
    – Phil W
    May 15 at 16:40
  • @randomperson no, that's not correct. Changing properties of an object never changes which object is named by the object. I've expanded my answer with examples. May 15 at 17:11
  • You have to replace the object, if you do not track, to get the rendering to happen. This not the same as simply changing the property values in the object.
    – Phil W
    May 15 at 17:12
  • Okay. Now I get it. I overlooked the fact that when I changed all the properties of my object, I was actually using the literal notation which created a new object. Hence the template re-rendered itself. Thank you so much @JasonClark. May 15 at 17:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.