Decorators in Salesforce

Salesforce is the best-known CRM in today’s world. It provides many functionalities that make our lives easier. Lightning web components and Apex classes are one of the top features provided by salesforce. One more such powerful feature is "decorators." Decorators provide a way to enhance the functionality of components by adding metadata or modifying behavior. By this blog, readers will get an idea of Decorators. Decorators in Salesforce are like magical charms that transform how things look and work.

Decorators are special markers used to define metadata for classes, methods, or properties. They make a lot of stuff easier. It feels like waving magical stick and getting all stuff done. In the context of LWC, decorators are used to define additional functionality that enhances component behavior, making it more efficient and easier to maintain.

Consider yourself a wizard and I’ll show you how to do magic with decorators.

• @api Decorator:

In the mystical land of Salesforce, wizards often collaborate to achieve powerful feats. As a wizard, you can inscribe the @api decorator on your spell to expose certain aspects, inviting other wizards to interact with your magic.

Example: Let's say we have a parent component called "AccountParent" and a child component called "AccountChild." We want to pass an account name from the parent to the child component.

// AccountParent.html
<template>
     <lightning-card title="Parent Component">
     <c-account-child account-name="Acme Corporation"></c-account-child>
     </lightning-card>
</template>

// AccountChild.js
import { LightningElement, api } from 'lwc';
     export default class AccountChild extends LightningElement {
         @api accountName;
         getUpperCaseName() {
              return this.accountName.toUpperCase();
         }
}

Don't forget to check out: Decorators in LWC | Salesforce Developer Guide

• @track Decorator:

Imagine you're a wizard dressing up for a grand magical ball. You wear the @track robes, which automatically adjust your attire based on the changing themes and colors of the event.

Example: Suppose we have a component that displays a dynamic like, and we want it to update whenever the count changes.

// LikeTracker.js
import { LightningElement, track } from 'lwc';
export default class LikeTracker extends LightningElement {
     @track likes = 0;
     handleIncrement() {
      this.likes++;
     }
}

• @wire Decorator:

Imagine you're a wizard seeking information about the magical creatures residing in the Salesforce Forest. You summon the @wire spirit, instructing it to bring you a list of these creatures. Look at the example below, it automatically fetches and updates data for the component based on a wired property's configuration.

Example: Let's create a component that retrieves a list of opportunities and displays them.

// OpportunityList.js
import { LightningElement, wire } from 'lwc';
import getOpportunities from 
'@salesforce/apex/OpportunityController.getOpportunities';
export default class OpportunityList extends LightningElement {
     @wire(getOpportunities) opportunities;
}

Conclusion

We can say that decorators are very impactful and if we learn to use them, they can increase readability, scalability, and enhance efficiency of our application. Using them is very easy. They allow us to automatically re-render code. Decorators allow you to encapsulate complex behaviors within components, reducing the exposure of implementation details to the outside world. This helps in creating cleaner and more secure components.

Check out another amazing blog here: What are Decorators in a Lightning Web Component?