Decorators in Lightning Web Components (LWC) look scary at first, but once you understand what each one does, they become some of the most useful tools in your toolbox.
As a Salesforce developer, whenever we want to create a Lightning Web Component that displays details from sObjects.
To retrieve the recordId and fetch data dynamically from the Salesforce org into the component, we use decorators to establish a connection between LWC and the Salesforce org.
In this article, we will learn about decorators in Lightning Web Components. I will explain what decorators are in LWC, their types, their uses, and how to use them in Salesforce LWC with real-time scenarios and explanations.
What are decorators in LWC?
In LWC, a decorator is something you put in front of a property or method (like @api, @track, or @wire) to give it special behavior.
You can think of them like labels that tell the LWC engine:
- “This property is public and can be set from outside.”
- “This private property should be reactive.”
- “This property or method is connected to Salesforce data.”
In LWC, we mainly use three decorators:
- @api – expose public properties and methods.
- @track – make private properties reactive (mostly for objects and arrays).
- @wire – fetch Salesforce data in a reactive way.
Decorators in Salesforce Lightning Web Component (LWC)
The decorators in LWC are JavaScript annotations that modify the behaviour of properties and methods.
They act as special markers that provide additional information (metadata) to the LWC framework about how to handle certain variables or methods in a component.
For example, you are creating a component that displays account details. The decorator allows the component to receive the recordId from a parent component or record page and dynamically fetches account data from Salesforce when the recordId changes.
Now, let’s understand the uses of the above decorators and how to use them in the Lightning Web Component.