Summary of LWC Decorators
Lightning Web Components use decorators to add special behavior to properties and methods.
The three main decorators are:
@api Decorator
- Used to make a variables or method public
- Allows access from other components, mainly parent components
- By default, all variables and methods in LWC are private
- Mainly used for parent-to-child communication
- Data flow is one-way (parent → child)
@api properties are read-only in the child- Child should not modify
@api values directly
- To request changes, child must use custom events
- Helps in building reusable and configurable components
@track Decorator
- Used to make a property reactive
- Reactivity means UI updates automatically when data changes
- Required mainly for objects and arrays
- Primitive data types are reactive by default
- Objects and arrays are reactive only when reference changes
@track allows tracking of internal (deep) changes- Does not control access (public/private)
- Mostly used when mutating existing objects or arrays
- Optional if object/array is reassigned instead of mutated
@wire Decorator
- Used to fetch data from Salesforce automatically
- Commonly used with Apex methods and UI API
- Provides reactive data fetching
- Runs automatically when component loads
- Uses
$ symbol to pass reactive variables
- Re-runs automatically when passed variables change
- Returns data on success and error on failure
- Data received is read-only
- Best for read-only and cacheable data
- For updates or full control, use imperative Apex
Simple Comparison Table (Quick View)
| Decorator |
Purpose |
Used For |
| @api |
Make property/method public |
Parent ↔ Child communication, one way communications |
| @track |
Track changes in data |
Reactivity for objects & arrays |
| @wire |
Get Salesforce data |
Apex calls & UI API |
Detailed Comparison Table (Easy to Remember)
| Feature |
@api |
@track |
@wire |
| Makes property public |
✅ Yes |
❌ No |
❌ No |
| Used for reactivity |
❌ No |
✅ Yes |
✅ Yes |
| Used for data fetching |
❌ No |
❌ No |
✅ Yes |
| Used for component communication |
✅ Yes |
❌ No |
❌ No |
| Works with objects/arrays |
❌ |
✅ |
✅ |
| Calls Apex |
❌ |
❌ |
✅ |
| Auto refresh on change |
❌ |
❌ |
✅ |
| Read-only in child |
✅ |
❌ |
✅ |
When to Use Which Decorator (Simple Rules)
| Requirement |
Use |
| Pass data from Parent to Child |
@api |
| Track object or array changes |
@track |
| Get data from Salesforce |
@wire |
| Child → Parent communication |
Custom Events |
| Modify Salesforce data |
Imperative Apex |
One-Line Definitions (Exam Friendly)
- @api → Makes properties or methods public for other components.
- @track → Tracks internal changes in objects and arrays.
- @wire → Fetches Salesforce data reactively.
