Decorators and LifeCycle Hooks in LWC
Kajal Yadav
Decorators and LifeCycle Hooks 1
What are the decorators?
A Decorator is a design pattern that allows adding behaviors to Javascript Objects.
Decorators which are part of ECMAScript are used to dynamically alter or modify the
functionality.
Types of decorators?
There are three types of Decorators in Lightning web components.
Api
Track
Wire
@Api
@api is a decorator used to mark public properties and methods that are
part of the component's public API.
This decorator makes them accessible to the parent component or other
components in the component tree.
Here’s how the @api decorator works in LWC:
1. Public Properties:
When applied to a property, the @api decorator exposes that
property to the parent component. This allows the parent component
to bind values to it or change its value.
Example:
Decorators and LifeCycle Hooks 2
2. Public Methods:
The @api decorator can also be used to expose methods from the child
component to the parent component. The parent can then call these
methods on the child component instance.
Example:
Decorators and LifeCycle Hooks 3
Example of @Api
apiDecoratorSampleChildComponent.html
apiDecoratorSampleChildComponent.js
apiDecoratorSampleChildComponent.js-meta.xml
apiDecoratorSampleParentComponent.html
Decorators and LifeCycle Hooks 4
apiDecoratorSampleParentComponent.js
@Track
@track makes a property reactive, meaning changes to its value trigger component
re- rendering.
What it does:
The @track decorator tells the LWC framework to monitor changes to the
properties of an object or elements of an array stored in a property,
triggering a re-render when those internal values change.
Example of @Track
helloWorld.html
Decorators and LifeCycle Hooks 5
helloWorld.js
@Wire
@wire connects LWC components to Apex methods, functions, or imperative Apex
wire adapters, enabling seamless data retrievaland manipulation.
With @wire, developers can declaratively bind Apex methods to properties in their
components, simplifying data fetching and management.
How to use wire:
Use the @wire decorator to wire a property or function
The wire service will provide an object with data and error properties
to the function
The function will be invoked whenever a value is available
Syntax:
import <methodName> from ‘@salesforce/apex/<ApexClassName.apexMethod>’;
@wire(methodName, {methodParams})
Decorators and LifeCycle Hooks 6
Example of @Wire
displayContacts.html
displayContacts.js
Decorators and LifeCycle Hooks 7
What are the LifeCycle Hooks?
Lifecycle hooks in LWC are predefined methods that allow developers
to intervene at different stages of a component’s journey.
These hooks provide you with the power to control, optimize, and respond to
specific events and transitions in your component’s lifecycle.
Understanding and using them effectively is key to creating robust and
responsive components.
Types of Lifecycle Hooks :-
1. constructor(): This is the first method called when a component is
created. It's used for initializing variables or setting up initial state.
Syntax:
2. connectedCallback(): Called when the component is inserted into the
DOM. Use it for tasks that need to be performed after the component is
rendered.
Syntax:
Decorators and LifeCycle Hooks 8
3. renderedCallback(): Invoked after the component's template has been
rendered. It's useful for interacting with the DOM or performing operations
after rendering.
Syntax:
4. disconnectedCallback(): Called when the component is removed from
the DOM. Use it for cleanup tasks, such as unsubscribing from event listeners.
Syntax:
5. errorCallback(): If an error occurs during rendering, this hook is called.
It’s your opportunity to gracefully handle errors.
Syntax:
Decorators and LifeCycle Hooks 9
Flow of Lifecycle Hooks :-
Decorators and LifeCycle Hooks 10
