How do I use decorators in Lightning Web Components? 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 in lwc?

Decorators are just wrappers 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 (lwc).

• @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 decorators

• 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 decorators

• 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 decorators

• 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