Embedded Files
What is LWC
LWC stands for lightning Web componentsIt is a Programming model and framework developed by Salesforce for building web applications on their Lightning PlatformIt is enables developers to create intractive and responsive user interfaces using web standards.
Like :
HTML,CSS and JavascriptAdvantage of LWC
1) Easy Learning
LWc uses HTML and Javascript to develop the component.That means tasks are more comfortable to do2) Better Performance
LWC delivers unparallered performance.which happends to be it's prime advantage3) Faster Development :
LWC enables users to come up with generic components for a seamless performance.4) Compatibility across browsers :
Supports the most advance browsers technologies and touch events.What are Decorators
In Salesforce, Decorators are a special feature provided by the Lightning web Component(LWC) frameworkDecorators are special Javascript annotations that we can use to enhance the behavior and capabilities of LWC components
Decorators help to costomize the behavior and functionality of LWC components by adding specific attributes and capabilities.They make it easier to create reusable and modular code by providing standardized ways to define properties, methods, and data retrieval.
API is public and reactive property.This decorator allows you to expose a public property or method form a component,Making it accessible for users in parent components or elsewhere in your applicaiton
This decorator exposes a property or method as a public API, making it accessible to other components and enabling communication between them.
This Decorator allows you to mark a property as tracked so that any changes to that property trigger re-rendering of the component's template.
Decorators help to costomize the behavior and functionality of LWC components by adding specific attributes and capabilities.They make it easier to create reusable and modular code by providing standardized ways to define properties, methods, and data retrieval.
There are three type of Decorators in Lightning web components :
1) API
API is public and reactive property.This decorator allows you to expose a public property or method form a component,Making it accessible for users in parent components or elsewhere in your applicaitonThis decorator exposes a property or method as a public API, making it accessible to other components and enabling communication between them.
2) Track
Track is private and reactive propertyApplying Track decorator property you can create a reative property that can be tracked for changes. When a tracked property is modified,The component automatically rerenders the affected parts of the user interface.This Decorator allows you to mark a property as tracked so that any changes to that property trigger re-rendering of the component's template.
3) Wire
Wire is reactive decorator propertyIt used when we want to communicate or make a connection on the Apex Controller and JavaScript controllerThis decorator enables you to establish a wire adapter to retrive data for Salesforce or external systems.It simplifies data retrieval by handling the data-fetching logic and providing the data to your component.Explain the lifecycle hooks of an LWC component
A lifecycle hook is a callback method triggered at a specific phase of a component instance's lifecycle.In Lightning Web Components (LWC), a lifecycle hook is a callback method that allows you to performactions at specific stages during the component's lifecycle.These hooks are predefined methods that you can implement in your LWC components to control and react to different phases of their existence.
There are following types of lifecycle hooks in LWC :
There are following types of lifecycle hooks in LWC :
constructor()
connectedCallback()
renderedCallback()
disconnectedCallback()
errorCallback(error, stack)
Constructor
• When it is called: It’s the very first hook that gets called when a component instance is created.
• Purpose:
• Initialize the component’s state or properties.
• Assign default values to variables.
• Do not perform DOM manipulations or use properties marked as reactive.
constructor() {
super(); // Always call `super()` first in the constructor
console.log('Constructor called');
}
ConnectedCallback
When it is called
Called when the component is inserted into the DOM.Purpose
- Perform setup tasks like fetching data from a server.
- Add event listeners.
- Interact with the parent component or set up communication.
Usage
connectedCallback(){
console.log('Component inserted into DOM');
// Example: Fetch data
fetchData();
}
ConnectedCallback
When it is called
Called when the component is inserted into the DOM.Purpose
- Perform setup tasks like fetching data from a server.
- Add event listeners.
- Interact with the parent component or set up communication.
Usage
connectedCallback() {
console.log('Component inserted into DOM');
// Example: Fetch data
fetchData();
}
RenderedCallback
When it is called:
Called after the component’s template and all child components are rendered in the DOM.Purpose:
- Perform post-render DOM manipulations.
- Run code that depends on the rendered DOM (like querying DOM elements or adding event listeners).
- This method can be called multiple times if re-rendering occurs due to changes in reactive properties.
Usage
renderedCallback() {
console.log('Component rendered in DOM');
// Example: Manipulate DOM
const element = this.template.querySelector('.my-class');
element.classList.add('highlight');
}
DisconnectedCallback
• When it is called: Called when the component is removed from the DOM.
• Purpose:
• Clean up tasks like removing event listeners or cancelling subscriptions.
• Avoid memory leaks by cleaning up resources.
• Usage:
disconnectedCallback() {
console.log('Component removed from DOM');
// Example: Remove event listeners
this.removeEventListener('click', this.handleClick);
}
DisconnectedCallback
When it is called
Called when the component is removed from the DOM.Purpose
- Clean up tasks like removing event listeners or cancelling subscriptions.
- Avoid memory leaks by cleaning up resources.
Usage
disconnectedCallback() {
console.log('Component removed from DOM');
// Example: Remove event listeners
this.removeEventListener('click', this.handleClick);
}
errorCallback
When it is called
Called when an error occurs in the component or any child components.Purpose
- Handle errors gracefully and prevent the app from crashing.
- Optionally log errors for debugging purposes.
Parameters
- error: The error object.
- stack: The stack trace of the error.
Usage
errorCallback(error, stack) {console.error('Error in component:', error);
console.error('Stack trace:', stack);
}
Key Points to Remember
- Always call super() in the constructor() method.
- Avoid using this.template in the constructor(); DOM is not yet available.
- RenderedCallback() can be called multiple times due to reactivity, so avoid placing heavy logic inside it.
- Clean up event listeners and resources in the disconnectedCallback() to prevent memory leaks.
- Use errorCallback() to gracefully handle errors.
show image
What is Lightning Message Servie (LMS) :
Lightning Message Service is a way to communicate or pass information between Visualforce pages, Aura, and LWC.The catch is that the Visualforce page or Aura Component must be in a lightning experience(not a salesforce class).LMS allows communication to happen between components that may or may not have relationship
Basically. The LMS has two components : The Message channel and the message payload. The Message channel denines the communication contract between components. while the message payload represents the data being send between components
To use the Lightning Message Service, we need to create a message channel. define its properties, and publish or subscribe to messages on that channer. Once a component publishes a message on a channer, any component that subscribes to that channer will receive the message payload.
Basically. The LMS has two components : The Message channel and the message payload. The Message channel denines the communication contract between components. while the message payload represents the data being send between components
To use the Lightning Message Service, we need to create a message channel. define its properties, and publish or subscribe to messages on that channer. Once a component publishes a message on a channer, any component that subscribes to that channer will receive the message payload.
What is Lightning Data Service
Lightning Data Service is a centralized data caching mechanism that is used to create, read, update and delete a record without server-side apex code
Advantage of LDS
- No Server Sie Apex call as the record is cached and retrived from client-side cach of record data that has been loaded via a wire adapter, thus eliminating multiple calls to the server
- LightningData Service is built on top of User Interface API, the responses respect CRUD access, field-level security, and Sharing settings pertaining to a User
- Invalidates cache entries for dependent Salesforce data and metadata changes. Whenever changes happen to the same record or metadata, LDS always has the latest copy of the record in the cache
- LWD always maintains consistent data across multiple components. If several components use Lightning Data Service to work with the same record, and one of the componets updates the record, the other components will automatically reflect the update.
There are three lightning components build on Lightning Data Service
lightning-record-form :
lightning-record-edit-form :
lightning-record-view-form :
Google Sites
Report abuse