Reactive Custom Properties in Lightning Web Component

Basically there are two type of main reactive properties widely used in Lightning Web Component .

1. Tracked Properties:
   This is the local properties to component JS controller and can not be called from any other component directly .
   Example :
   Create below component with any name

//testTrack.html
<template>
<p>hello , {testrack}</p>
<lightning-input label=”name” value = “{testrack}” onchange = “{handleChange}” ></lightning-input>
</template>

in above html we are referring testrack properties which @track properties in below JS which makes reactive if you change the value of name testrack properties changes and it reflects on UI instantly .

//testTrack.js
import { LightningElement,track } from ‘lwc’;
export default class TestRajesh extends LightningElement {
@track testrack = “testData”;
handleChange(event)
{
let eventName = event.target.value;
this.testrack = eventName.toUpperCase();
}
}

Output