Basic Question about @track decorator

Question

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>

Answer 1

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.