1

I have a Lightning Web Component with 2 private properties. One property is reactive via track, and the second is non-reactive (not decorated).

This is the HTML file:

<template>
    <table style="background: white;">
        <tr>
            <td>
                Reactive Private Property:
                <lightning-input type="text" onchange={reactiveHandler}></lightning-input>
                Value: {reactiveProperty}
            </td>
        </tr>
        <tr>
            <td>
                Nont-Reactive Private Property:
                <lightning-input type="text" onchange={nonReactiveHandler}></lightning-input>
                Value: {nonReactiveProperty}
            </td>
        </tr>
    </table>
</template>

This is the JS file:

import { LightningElement, track } from 'lwc';

export default class ReactiveAndNonReactiveProperties extends LightningElement {
  @track reactiveProperty;
  nonReactiveProperty;

  reactiveHandler(event) {
    this.reactiveProperty = event.target.value;
  }

  nonReactiveHandler(event) {
    this.nonReactiveProperty = event.target.value;
  }
}

As you can see, only one property is decorated with @track. However, when I type something in the input text of the non-reactive property, it is still rendered on the screen, which should not happen until I change the value in the input text of the reactive property.

Guy BD
  • 69
  • 1
  • 3
  • 10

2 Answers2

2

Correction in provided answer: According to Spring'20 release, all primitive properties are reactive by default, however, if the value held by property is either an array or an object, then you'll need to specify the property reactive using @track decorator

Prashant Kashyap
  • 151
  • 5
0

According to Spring'20 release , all properties are by default reactive. Even if you don't use "track" , it will be rendered on the screen.

Winnie
  • 16