My goal is to upskill on Lightning Web Components(LWC) and create a course in the next few months. Aside from learning kebab case is not a food, the other thing that made me scratch my head when I dabbled with LWC was decorators. I used them but didn’t fully understand what they are.
Anyway, I’ll be talking about the decorators because I want to get a deeper understanding of this topic by doing this tutorial.
What are decorators?
Decorators are just a wrapper around a function. For instance, they are used to enhance the functionality of the function without modifying the underlying function. (See Higher Order Function)
The ability to create decorators is part of ECMAScript. Decorators are very widely used in JavaScript through transpilers. For example, see the documentation of core-decorators, ember-decorators, Angular, Stencil, and MobX decorators.
These three decorators are unique to Lightning Web Components.
- @api – makes a property public.
- @track – makes property private
- @wire – reads Salesforce data or metadata
What are Reactive Properties?
If the value of properties changes, the component rerenders. To make the property reactive we wrap them with such decorators.
Properties that are non-reactive means changes in value will not cause the component to rerender.
When to use @api
- when you want to make the property reactive and be accessible outside of the component they were declared.
- the parent component or owner component can set values to the public properties for the child component.
- if we want changes in the property value to rerender any content on components that references the property.
import syntax
course.js – decorating a property
course.html – template use
courseApp.html – parent component has access and can set child properties
When to use @track
- when you want to make a property reactive but only within the component.
- we don’t want the parent component to change the property values of the child component.
import syntax
course.js – added new track property
course.html – added new template
courseApp.html – parent setting the course-level to Intermediate has no effect
When to use @wire
- used to read Salesforce data or metadata.
- we want the component to rerender (be reactive) when the wire service provisions data.
To use the @wire decorator you need to understand a bit about the wire service and calling apex methods
What is the wire service?
- the wire service provisions an immutable stream of data to the component
- immutable means it is read-only data. To mutate it you need to make a shallow copy of the object.
- the wire service delegates control flow to the LWC engine. This is great for read operations. But if you want to do C-U-D(create, update or delete) we need to use the Javascript API instead.
- the wire service provisions data either from the client cache if it exists, then fetches from the server if needed.
The wire service syntax and steps
- import from adapterModule and create identifier for the wire adapter
- decorate wire property or function with the wire adapterConfig object
- create a property or function that receives the stream of data
Importing objects, fields and relationships:
Use the lightning\ui* api wire adapter module and import reference to objects and fields to make sure the object or fields exists. Recommended using the lightning\ui* api wire adapter module because it respects the user’s CRUD, FLS, and sharing access.
Importing objects, fields and relationships
@wire decorating a property
@wire decorating a function
How to use wire service with Apex methods?
- Apex methods can be called via @wire or imperatively. It follows a similar syntax but instead of importing the wire adapter, we import the class method. Then data streamed will be received either by a property or a function.
- wire adapter provisions new values when available, wire service provisioned data from apex methods doesn’t. To get the new values we need to call refreshApex().
import syntax
expose Apex methods with static/global or public and annotate with @AuraEnabled(cacheable=true) – improves runtime performance
import the apex method and wire the property or function which will receive the data stream
if you used @wire, Apex method provisioned data can get stale, use the refreshApex() to get the latest values
importing syntax
usage example – via button click refresh teh data that the wire service provisioned
Well, that wraps the basics on decorators. Hope you learned something from this post and found it useful.
There are more details that you can get out from the documentation linked below.
https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.data
