LWC Component Structure & Lifecycle

Understanding LWC Component Structure

Each LWC component consists of multiple files that define its UI, logic, styling, and metadata. Here’s a breakdown of the key files:

1. HTML File (`.html`)

Defines the user interface of the component using standard HTML syntax.

<template>
    <h1>Hello, {greeting}!</h1>
</template>

2. JavaScript File (`.js`)

Contains the component’s logic, event handling, and data binding.

import { LightningElement } from 'lwc';
export default class HelloWorld extends LightningElement {
    greeting = 'World';
}

3. Meta XML File (`.xml`)

Defines where the component can be used in Salesforce (e.g., Record Pages, Home Pages, App Pages).

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata"
    fqn="HelloWorld">
    <apiVersion>60.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>

4. CSS File (`.css`) (Optional)

Used to style the component, following scoped CSS principles.

h1 {
    color: blue;
}

LWC Component Lifecycle

LWC components go through a series of lifecycle phases, allowing developers to execute logic at specific moments.

Lifecycle Hooks in LWC

Hook	Purpose
`constructor()`	Called when the component instance is created.
`connectedCallback()`	Called when the component is inserted into the DOM. Ideal for fetching data.
`renderedCallback()`	Called after the component is rendered. Useful for interacting with the DOM.
`disconnectedCallback()`	Called when the component is removed from the DOM. Used for cleanup tasks.
`errorCallback(error, stack)`	Called when an error occurs in the component.

Example of Lifecycle Hooks in Action

import { LightningElement } from 'lwc';
export default class LifecycleDemo extends LightningElement {
    constructor() {
        super();
        console.log('Constructor called');
    }

    connectedCallback() {
        console.log('Connected Callback called');
    }

    renderedCallback() {
        console.log('Rendered Callback called');
    }

    disconnectedCallback() {
        console.log('Disconnected Callback called');
    }
}

Deploying and Testing the Component

Create the component:sfdx force:lightning:component:create -n LifecycleDemo -d force-app/main/default/lwc
Deploy to Salesforce:sfdx force:source:push
Add the component to a Lightning Page and observe the console logs.

Conclusion

Understanding the structure and lifecycle of LWC components is crucial for developing efficient applications. In the next post, we will dive into Data Binding in LWC, explaining one-way and two-way binding with practical examples.

Stay tuned! 🚀