LWC : After Spring ’20, The @track Decorator Is No Longer Required for Lightning Web Components.

Its time to do brain storm, whether to use @track to make a field reactive. All fields in a Lightning web component class are reactive. If a field’s value changes, and the field is used in a template or in a getter of a property that’s used in a template, the component rerenders and displays the new value.

❓ Where: This change applies to Lightning web components in Lightning Experience and all versions of the Salesforce app.

❓ Why: It was difficult for developers to know which fields to decorate with @track. When a field’s value changed, developers couldn’t easily predict when the component would rerender and display the new value.

❓ How: The framework observes changes to a field’s value, rerenders the component, and displays the new value. All expressions in the component are also evaluated. In fact, since all fields are reactive, we no longer need to use the term “reactive field.”

Before Spring ’20, to make a field reactive, you had to decorate it with @track. You see this approach used in older code samples, and it’s still supported.

@track firstName = '';

Now, use the @track decorator only in one use case, which we explain later.

Let’s look at some sample code. This component has two input fields: First Name and Last Name. When you enter a name in either field, the component converts it to uppercase and displays it.

<!-- helloExpressions.html -->

<template>
    <lightning-input
        name="firstName"
        label="First Name"
        onchange={handleChange}
    ></lightning-input>
    <lightning-input
        name="lastName"
        label="Last Name"
        onchange={handleChange}
    ></lightning-input>
    <p>
        Uppercased Full Name: {uppercasedFullName}
    </p>
</template>

The component’s class defines the firstName and lastName fields. Like all fields as of Spring ’20, they’re reactive. Because they’re used in the getter of a property that’s used in the template (uppercasedFullName), the component rerenders when their values change.

// helloExpressions.js

import { LightningElement } from 'lwc';

export default class TrackExample extends LightningElement {
    firstName = '';
    lastName = '';

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

    get uppercasedFullName() {
        return `${this.firstName} ${this.lastName}`.trim().toUpperCase();
    }
}

Before Spring ’20, to make the component rerender when a user entered a first or last name, you had to decorate the fields with @track.

@track firstName = '';
@track lastName = '';

✔️ Observe an Object’s Properties or an Array’s Elements:

There is still one use case for @track. When a field contains an object or an array, there’s a limit to the depth of changes that are tracked. To tell the framework to observe changes to the properties of an object or to the elements of an array, decorate the field with @track.

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

To understand, let’s declare the fullName field, which contains an object with two properties, firstName and lastName.

fullName = { firstName : '', lastName : '' };

The framework observes changes that assign a new value to fullName. This code assigns a new value to the fullName field, so the component rerenders.

// Component rerenders.
this.fullName = { firstName : 'John', lastName : 'Doe' };

However, if we assign a new value to one of the object’s properties, the component doesn't rerender because the properties aren’t observed.

// Component doesn't rerender.
this.fullName.firstName = 'John';

The framework observes changes that assign a new value to the fullName field. This code doesn't do that, instead it assigns a new value to the firstName property of the fullName object.

To tell the framework to observe changes to the object's properties, decorate the fullName field with @track. Now if we change either property, the component rerenders.

// Component rerenders.
@track fullName = { firstName : '', lastName : '' };
this.fullName.firstName = 'John';

Data Source: salesforce.com