Reactive and non-reactive properties

As we know in every programming language we need some variable or container to hold the value.we generally call them variables as property in Lightning web component.

These properties can be categorized in two ways.

1. Reactive
2. non-reactive

Reactive Property

If the value of the property changes it rerenders the value on the template.Whenever we update the reactive property it updates the template.There are two reactive properties in Lightning web component.

• Public
• private

Public property: This property denoted by the @api.it rerenders the template whenever value changes for the property.@api property use in the data flow between parent to child.we have to use the @api property in the child component to get the data from parent component.

Example

Sfdrillerapi.html

<template>
   <lightning-card title="Salesforce Driller">
     <div class="slds-m-around_medium">
       <p>Hello, {salesforcedriller}!</p>
     </div>
   </lightning-card>
</template>

Sfdrillerapi.js

import { LightningElement, api } from 'lwc';
export default class salesforcedriller extends LightningElement {
  @api salesforcedriller ='Salesforce Driller';
}

Output

Explanation: As we can see in the above controller we have used the public property which is @api. i.e @api salesforcedriller.

Private Property: Private property denoted by the @track.@track use to restrict the property to be used in different component.@track also works as a reactive property.

Note: after summer 2020 @trac property is deprecated.

Example

Salesforcedriller.html

<template>
   <lightning-card title="salesforce Driller">
     <div class="slds-m-around_medium">
       <p>Hello, {salesforceDriller}!</p>
       <lightning-input label="Name" value={salesforceDriller} onchange={changeHandlerEvent}></lightning-input>
     </div>
   </lightning-card>
</template>

Sfdriller.js

import { LightningElement } from 'lwc';
export default class salesforceDriller extends LightningElement {
   salesforceDriller = 'Salesforce';
changeHandlerEvent(event) {
  this.salesforceDriller = event.target.value;
}
}

Explanation:

changeHandlerEvent: This method will fire when we edit the input text field. The text will be changed after editing the text input field.

salesforceDriller This is the private reactive property.

Output

Non-reactive property

Whenever value changes to the property it does not rerender to the template.basics for non reactive property we do not use any decorators.

NOTE: After the 2020 summer release we do not have anything called non-reactive property.