Lifecycle Hooks, Navigation, Security and Performance

Senior LWC questions go beyond rendering data: when each lifecycle hook runs, how to navigate and notify users, what Lightning Web Security changes, how to keep components fast — and how to prove it all with Jest tests.

1. Explain the lifecycle hooks in order.

• constructor() — call super() first; no access to attributes or child elements.
• connectedCallback() — inserted into the DOM; good for initial data loads and subscriptions.
• render() — rarely used; choose a template.
• renderedCallback() — after every render; guard one-time work with a flag.
• disconnectedCallback() — removed from the DOM; clean up listeners, timers and subscriptions.
• errorCallback(error, stack) — catches errors from child components (an error boundary).

hasRendered = false;
connectedCallback() { this.timer = setInterval(() => this.refresh(), 30000); }
renderedCallback() {
    if (this.hasRendered) return;           // runs after every render — guard it
    this.hasRendered = true;
    this.refs.searchInput?.focus();
}
disconnectedCallback() { clearInterval(this.timer); }
errorCallback(error, stack) { this.errorMessage = error.message; }

2. How do you navigate in LWC?

Extend NavigationMixin(LightningElement) and call this[NavigationMixin.Navigate] with a page reference — record pages, object list views, tabs, web pages. Use GenerateUrl for real links (so users can open in a new tab).

import { NavigationMixin } from 'lightning/navigation';

export default class CaseLink extends NavigationMixin(LightningElement) {
    @api recordId;
    openCase() {
        this[NavigationMixin.Navigate]({
            type: 'standard__recordPage',
            attributes: { recordId: this.recordId, objectApiName: 'Case', actionName: 'view' },
        });
    }
}

3. How do you show toasts, alerts and modals?

Dispatch ShowToastEvent for toasts; use LightningAlert, LightningConfirm and LightningPrompt for dialogs (native alert() is blocked); extend LightningModal to build custom modals opened with MyModal.open().

import LightningConfirm from 'lightning/confirm';

async handleDelete() {
    const ok = await LightningConfirm.open({ message: 'Delete this contact?', variant: 'header', label: 'Please confirm', theme: 'warning' });
    if (ok) await this.deleteContact();
}

4. What is Lightning Web Security?

LWS is the security architecture that isolates components by namespace using JavaScript sandboxes, replacing Lightning Locker. It blocks unsafe access to other namespaces' components and globals while allowing more standard web APIs and third-party libraries than Locker did. You still escape output, avoid innerHTML with user data and enforce security in Apex.

5. How do you keep LWC components fast?

Prefer LDS and cacheable wires (fewer server calls), load only needed fields, paginate or virtualise long lists, debounce inputs, avoid heavy work in renderedCallback, lazy-load third-party libraries once, and keep component trees shallow. Use the browser performance panel and Salesforce debug mode to measure.

6. How do you unit test an LWC with Jest?

Use @salesforce/sfdx-lwc-jest. Create the element, append it to the document, set @api properties, emit mock data into wire adapters, wait for re-render with a resolved promise, and assert the DOM. Clean up the DOM after each test.

import { createElement } from 'lwc';
import OpenCases from 'c/openCases';
import openCases from '@salesforce/apex/CaseController.openCases';

jest.mock('@salesforce/apex/CaseController.openCases',
    () => ({ default: jest.fn() }), { virtual: true });

afterEach(() => { while (document.body.firstChild) document.body.removeChild(document.body.firstChild); });

it('renders a row per case', async () => {
    const el = createElement('c-open-cases', { is: OpenCases });
    el.recordId = '001xx000003DGb2AAG';
    document.body.appendChild(el);
    openCases.emit([{ Id: '500x1', CaseNumber: '0001', Subject: 'Login issue' }]);
    await Promise.resolve();
    expect(el.shadowRoot.querySelectorAll('li').length).toBe(1);
});

7. How do you make a component available in different places?

Set targets in the meta XML: lightning__RecordPage, lightning__AppPage, lightning__HomePage, lightning__FlowScreen, lightningCommunity__Page, lightning__RecordAction (quick actions) and more, with design properties per target.

8. How do you get the current user and custom labels?

Import them as modules: @salesforce/user/Id, @salesforce/label/c.Label_Name, @salesforce/resourceUrl/name, @salesforce/i18n/locale, and @salesforce/customPermission/Name to check permissions.

import USER_ID from '@salesforce/user/Id';
import WELCOME from '@salesforce/label/c.Welcome_Message';
import canApprove from '@salesforce/customPermission/Approve_Discounts';