6

I have a (probably very) basic question about @track decorator.

I modified the helloExpressions LW Component from Sample Gallery as below. Here the values FirstName and lastName are no longer decorated as Tracked properties. I am adding their concatenated value to another tracked property capitalFullName.

I do not have the contributing factors for 'uppercasedFullName' tracked, still this updates the UI for both output values uppercasedFullName and capitalFullName when firstname or lastname are updated from input screen. However if I remove track decorator for capitalFullName, the UI refresh stops working. If I am not tracking the direct contributors uppercasedFullName, why does it still work when I am using them somewhere else with a tracked property?

JavaScript File

import { LightningElement, track } from 'lwc';

export default class HelloExpressions extends LightningElement
{
    firstName = '';
    lastName = '';
    @track capitalFullName;

    handleChange(event)
    {
        const field = event.target.name;
        if (field === 'firstName')
        {
            this.firstName = event.target.value;
        } else if (field === 'lastName')
        {
            this.lastName = event.target.value;
        }

        this.capitalFullName = this.firstName + ' <--> ' + this.lastName;
        this.capitalFullName = this.capitalFullName.trim().toUpperCase();
    }

    get uppercasedFullName()
    {
        console.log('inside uppercasedFullName = ' + this.firstName);
        return `${this.firstName} ${this.lastName}`.trim().toUpperCase();

    }
}

HTML File:

 <template>
    <lightning-card title="HelloExpressions" icon-name="custom:custom14">
        <div class="slds-m-around_medium">
            <lightning-input name="firstName" label="First Name" onchange={handleChange}></lightning-input>
            <lightning-input name="lastName" label="Last Name" onchange={handleChange}></lightning-input>
            <p class="slds-m-top_medium">
                Uppercased Full Name: {uppercasedFullName}
            </p>
            <p class="slds-m-top_medium">
                Capital Full Name: {capitalFullName}
            </p>
        </div>

        <c-view-source source="lwc/helloExpressions" slot="footer">
            Use JavaScript expressions in a template. Type something in the
            input fields to see the recipe in action.
        </c-view-source>
    </lightning-card>
</template>
1
  • 4
    I found something additional on this. Not sure if it is designed this way or a bug, but looks like when I have at-least one tracked property on UI, it refreshes the whole UI. If I add another non-tracked property with all features, assignments similar to 'capitalFullName' and show it up on UI; even that value is updated. Considering, this new property is not tracked and its contributing properties are not tracked, i should not be seeing any updates for that property on UI.
    – kshitij
    Dec 7 '19 at 0:00
4

Triggering any @track variable results in all merge fields being recalculated to see if the DOM needs to be updated. Only nodes that actually have changed values result in those nodes being updated in the DOM. This is why, when you remove the last @track, nothing gets updated, otherwise everything gets updated when capitalFullName is updated. I wouldn't say this is "unexpected" behavior, it's just not really clearly documented. You'd need to look at the source code to get a better idea of what's going on. I'm not sure, but this file might help you understand better.

1
  • Thanks sfdcfox. I will read the link thoroughly this week. You answer does makes sense to me. I also tried removing the tracked property from HTML file and kept rest of the properties as is, as expected nothing was updated. While the documentation does mention this line "When a component rerenders, all the expressions used in the template are reevaluated.", it was not completely clear to me. developer.salesforce.com/docs/component-library/documentation/…
    – kshitij
    Dec 10 '19 at 18:50

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.