What is Lightning Web Components (LWC)?

Lightning Web Components (LWC) is a programming model developed by Salesforce for building web components on the Salesforce Lightning Platform. It leverages the modern web standards of web components to provide a powerful and efficient way to create reusable, composable, and customizable UI elements for Salesforce applications.

Benefits of LWL component:

Simplified development process for extensive modular applications.
Effortless utilization of cutting-edge web features and structures.
Unified approach and transferable expertise. Developers proficient in contemporary JS frameworks can quickly adapt to LWC.
Enhanced efficiency and superior speed
Easily integrate with responsive design frameworks and CSS grid systems. This allows developers to create flexible and responsive layouts that adapt to different screen sizes and devices, ensuring a consistent user experience across desktops, tablets, and smartphones.

Lightning Web Component Structure:
Comparable to an AURA component, the fundamental elements of an LWC encompass HTML and JavaScript. Optional components such as CSS can also be incorporated. However, in contrast to these, an LWC includes an XML configuration file. This file outlines the metadata values for the component. Therefore, an LWC component would resemble.

Decorators in LWC Component:
Decorators in Lightning Web Components (LWC) are a way to add metadata to properties and methods in a class. They are used to configure the behaviour of these class members. In LWC, decorators are written as JavaScript decorators, a part of the ECMAScript standard.

Here are some key decorators used in Lightning Web Components:
1. @api Decorator: This decorator marks a public property or method as public and accessible from the component's template. It allows the property or method to be used in parent components.

import { api } from 'lwc';

   export default class MyComponent extends LightningElement {
       @api publicProperty;
}

2. @track Decorator: This decorator tracks changes to a property or object. When a tracked property or object changes, the component re-renders to reflect those changes. It is used to enable reactivity in Lightning Web Components.

import { track } from 'lwc';

   export default class MyComponent extends LightningElement {
       @track trackedProperty;
   }

3. @wire Decorator: This decorator configures a wired property or method. It connects a Lightning Web Component to a wire adapter to retrieve data from Salesforce. It is used for data binding and automatic refresh when the data changes.

import { wire } from 'lwc';
   import fetchData from '@salesforce/apex/Controller.fetchData';

   export default class MyComponent extends LightningElement {
       @wire(fetchData) wiredData;
   }

Life cycle hook of LWC component:
In Lightning Web Components (LWC), several lifecycle hooks allow developers to interact with the component at different stages of its lifecycle. These hooks enable you to perform actions such as initializing data, rendering components, handling updates, and cleaning up resources.

1. constructor(): The constructor is the first lifecycle hook called when an instance of the component is created. It is used for initializing component properties and setting up initial values.

constructor() { 
   super();
   // Initialize properties or set default values here  
}

2. connectedCallback(): This hook is called when the component is inserted into the DOM. It is often used for performing actions after the component is rendered.

connectedCallback() {  
   // Perform actions after the component is inserted into the DOM  
}

3. renderedCallback(): This hook is called after the component's template is rendered. It is useful for interacting with the rendered DOM or executing logic after rendering.

renderedCallback() { 
   // Interact with the rendered DOM or execute logic after rendering 
}

4. disconnectedCallback(): This hook is called when the component is removed from the DOM. It is used for cleaning up resources and performing actions before the component is destroyed.

disconnectedCallback() {
   // Clean up resources or perform actions before the component is destroyed  
}

5. reconnectedCallback(): This hook is called when the component is reinserted into the DOM after being removed. It is used for performing actions after reattachment.

reconnectedCallback() {
   // Perform actions after the component is reinserted into the DOM   
}

6. render(): The render() method is required in every LWC component. It defines the component's template and structure. The `render()` method is called whenever a property changes and other lifecycle hooks trigger a re-render.

render() {       
   // Define the component's template and structure 
}

What is Lightning Web Components (LWC)?

Discussions