Lightning Web Components (LWC) Interview Questions

1What it is

Lightning Web Components is Salesforce's UI framework built on web standards: custom elements, shadow DOM, ES modules and plain JavaScript classes. Aura is the older framework, with its own component model.

2Why it matters

Because LWC leans on what the browser already does, it is faster, lighter and familiar to any JavaScript developer. It is Salesforce's recommended way to build new UI; Aura remains for older components.

3Example

4In short - say this in the interview

1What it is

Decorators that add Salesforce behaviour to class fields. @api makes a property or method public, so a parent can set or call it. @track makes a field re-render when the inside of an object or array changes. @wire connects a field or function to data from a wire adapter or Apex.

2Why it matters

Every field in an LWC is already reactive when you reassign it, so @track is only needed for mutations inside objects and arrays. @api is the component's public contract; @wire is how it gets data without writing fetch code.

3Example

import { LightningElement, api, track, wire } from 'lwc';
import getProducts from '@salesforce/apex/ProductController.getProducts';

export default class Cart extends LightningElement {
    @api customerId;          // set by the parent: <c-cart customer-id={id}>
    total = 0;                // reactive: reassigning re-renders
    @track items = [];        // @track: items.push() re-renders too

    @wire(getProducts) products;   // data arrives in products.data / products.error

    add(item) {
        this.items.push(item);
        this.total += item.price;
    }
}

4In short - say this in the interview

1What it is

Three ways, by relationship. Parent to child: set the child's @api properties or call its @api methods. Child to parent: dispatch a CustomEvent that the parent listens for. Unrelated components: publish and subscribe on a Lightning Message Service channel.

2Why it matters

Data flows down and events flow up, which keeps each component independent. Lightning Message Service covers components that share no parent - even across LWC, Aura and Visualforce on the same page.

3Example

import { LightningElement, api } from 'lwc';

export default class ItemTile extends LightningElement {
    @api item;   // set by the parent

    handleClick() {
        this.dispatchEvent(new CustomEvent('select', { detail: { id: this.item.Id } }));
    }
}

<template>
    <template for:each={items} for:item="item">
        <c-item-tile key={item.Id} item={item} onselect={handleSelect}></c-item-tile>
    </template>
</template>

4In short - say this in the interview

1What it is

@wire calls an Apex method automatically, caches the result and re-runs when a reactive parameter changes. Imperative calls are ordinary function calls you make yourself, for example on a button click.

2Why it matters

@wire suits reading data that should follow the page - it needs @AuraEnabled(cacheable=true), and cacheable methods cannot change data. Anything that saves, or must run only on demand, is an imperative call.

3Example

public with sharing class ContactController {
    @AuraEnabled(cacheable=true)             // required for @wire; no DML allowed
    public static List<Contact> getContacts(Id accountId) {
        return [SELECT Id, Name, Email FROM Contact WHERE AccountId = :accountId WITH USER_MODE];
    }

    @AuraEnabled                             // not cacheable: may change data
    public static void markPrimary(Id contactId) { /* update ... */ }
}

import { LightningElement, api, wire } from 'lwc';
import { refreshApex } from '@salesforce/apex';
import getContacts from '@salesforce/apex/ContactController.getContacts';
import markPrimary from '@salesforce/apex/ContactController.markPrimary';

export default class ContactList extends LightningElement {
    @api recordId;
    @wire(getContacts, { accountId: '$recordId' }) contacts;   // '$' = re-run when it changes

    async handleMark(event) {
        await markPrimary({ contactId: event.target.dataset.id });   // imperative
        await refreshApex(this.contacts);                            // reload the wired data
    }
}

4In short - say this in the interview

1What it is

Methods the framework calls as a component lives: constructor() when it is created, connectedCallback() when it is added to the page, renderedCallback() after each render, disconnectedCallback() when it is removed, and errorCallback() in a parent when a child throws.

2Why it matters

Each hook has its job. Loading data or subscribing belongs in connectedCallback; touching the rendered DOM belongs in renderedCallback; cleaning up belongs in disconnectedCallback - or you leak subscriptions.

3Example

4In short - say this in the interview

1What it is

Lightning Data Service reads and saves single records without Apex, through base components like lightning-record-form and adapters like getRecord and updateRecord. It shares one cache across every component on the page.

2Why it matters

It needs no Apex and no test class, it respects the user's sharing, object and field permissions automatically, and when one component saves a record, every other component showing it updates.

3Example

<template>
    <lightning-record-form record-id={recordId} object-api-name="Account"
        fields={fields} mode="view"></lightning-record-form>
</template>

import { LightningElement, api, wire } from 'lwc';
import { getRecord, getFieldValue } from 'lightning/uiRecordApi';
import NAME from '@salesforce/schema/Account.Name';

export default class AccountName extends LightningElement {
    @api recordId;
    @wire(getRecord, { recordId: '$recordId', fields: [NAME] }) account;

    get name() { return getFieldValue(this.account.data, NAME); }
}

4In short - say this in the interview

1What it is

Templates use directives: lwc:if, lwc:elseif and lwc:else for conditions, and for:each with for:item (plus a unique key) to repeat markup for each item.

2Why it matters

Templates hold no expressions - logic lives in the JavaScript class as getters - which keeps markup simple and fast. The key lets the framework update only the rows that changed.

3Example

<template>
    <template lwc:if={isLoading}>
        <lightning-spinner alternative-text="Loading"></lightning-spinner>
    </template>
    <template lwc:elseif={error}>
        <p class="slds-text-color_error">{error}</p>
    </template>
    <template lwc:else>
        <template for:each={contacts} for:item="c">
            <p key={c.Id}>{c.Name}</p>
        </template>
    </template>
</template>

4In short - say this in the interview