Salesforce Lightning Web Components Concepts

@track

The @track decorator in Salesforce Lightning Web Components (LWC) marks a property as reactive. When a tracked property changes, the component’s template rerenders to reflect those changes. This decorator ensures that if a property changes, the component can react to that change and update the UI accordingly. All properties are reactive by default (no need for @track unless you want deep reactivity in nested objects/arrays).

@api

The @api decorator exposes a public property in a Lightning web component, allowing the property to be set from a parent component. This decorator marks a property as public and defines its behavior.

@wire

The @wire decorator enables the wiring of a Lightning web component to a wire adapter. Wire adapters are functions that receive configuration parameters and return data. By using the @wire decorator, a component can receive data from Salesforce without needing to write imperative Apex or JavaScript code.

Wire to Salesforce Data (UI API)

Fetch account records using the Lightning Data Service wire adapter:

import { LightningElement, wire } from 'lwc';
import { getRecord } from 'lightning/uiRecordApi';
import NAME_FIELD from '@salesforce/schema/Account.Name';
import INDUSTRY_FIELD from '@salesforce/schema/Account.Industry';

export default class WireDemoRecord extends LightningElement {
    recordId = '001XXXXXXXXXXXXXXX'; // Example Account Id
    accountName;
    accountIndustry;

    @wire(getRecord, { recordId: '$recordId', fields: [NAME_FIELD, INDUSTRY_FIELD] })
    wiredAccount({ error, data }) {
        if (data) {
            this.accountName = data.fields.Name.value;
            this.accountIndustry = data.fields.Industry.value;
        } else if (error) {
            console.error(error);
        }
    }
}

Apex Controller

public with sharing class AccountController {
    @AuraEnabled(cacheable=true)
    public static List getAccounts() {
        return [SELECT Id, Name, Industry FROM Account LIMIT 5];
    }
}

Example 2: Wire to Apex Method

Fetch data from a custom Apex class:

public with sharing class AccountController {
    @AuraEnabled(cacheable=true)
    public static List getAccounts() {
        return [SELECT Id, Name, Industry FROM Account LIMIT 5];
    }
}

LWC JavaScript

import { LightningElement, wire } from 'lwc';
import getAccounts from '@salesforce/apex/AccountController.getAccounts';

export default class WireDemoApex extends LightningElement {
    accounts;
    error;

    @wire(getAccounts)
    wiredAccounts({ error, data }) {
        if (data) {
            this.accounts = data;
            this.error = undefined;
        } else if (error) {
            this.error = error;
            this.accounts = undefined;
        }
    }
}

Imperative Call

In Lightning Web Components (LWC), an imperative call means you’re calling an Apex method directly from JavaScript instead of using @wire. This gives you more control (e.g., calling on button click, handling parameters dynamically, or chaining logic).

Apex Controller

public with sharing class AccountController {
    @AuraEnabled
    public static List getAccounts(Integer limitSize) {
        return [SELECT Id, Name, Industry FROM Account LIMIT :limitSize];
    }
}

LWC JavaScript (Imperative Call)

import { LightningElement, track } from 'lwc';
import getAccounts from '@salesforce/apex/AccountController.getAccounts';

export default class ImperativeCallDemo extends LightningElement {
    @track accounts;
    @track error;

    handleLoadAccounts() {
        getAccounts({ limitSize: 5 }) // Imperative call with parameter
        .then(result => {
            this.accounts = result;
            this.error = undefined;
        })
        .catch(error => {
            this.error = error;
            this.accounts = undefined;
        });
    }
}

ConnectedCallback

The connectedCallback lifecycle hook in Lightning web components is called when a component is inserted into the DOM. This hook is useful for performing tasks such as initializing state, setting up event listeners, or fetching data when the component is connected to the DOM.

import { LightningElement, track } from 'lwc';

export default class ConnectedCallbackDemo extends LightningElement {
    @track message = 'Loading...';

    connectedCallback() {
        // This runs when the component is added to the DOM
        console.log('Component connected to the DOM');

        // Example: simulate fetching data
        setTimeout(() => {
            this.message = 'Data loaded successfully!';
        }, 2000);
    }
}

CustomEvent

A CustomEvent in Salesforce Lightning Web Components is a way for a child component to communicate with its parent component. Custom events allow child components to dispatch events with data that parent components can listen for and handle.