Lightning Web Components Questions

1. What is Lightning Web Component (LWC)?

Answer:
LWC is a modern UI framework developed by Salesforce to build web applications using standard web technologies like HTML, CSS, and JavaScript. It leverages Web Components standards and provides better performance than Aura components.

---

2. What are the differences between Aura Components and LWC?

Answer:

Feature	Aura	LWC
Base	Custom Salesforce framework	Standard Web Components
Performance	Slower	Faster
Browser Support	Polyfilled	Uses native APIs
Syntax	Verbose	Cleaner, modern JavaScript

---

3. What are the main files in an LWC component?

Answer:

• .html – Template (HTML)

• .js – JavaScript controller

• .js-meta.xml – Metadata configuration

• .css (optional) – Styling

---

4. How do you communicate between LWC components?

Answer:

• Parent to Child: Using public properties (@api)

• Child to Parent: Using custom events (this.dispatchEvent(new CustomEvent('eventname')))

• Sibling: Using a common parent or Pub/Sub/Event Service

---

5. What is @api, @track, and @wire in LWC?

Answer:

• @api: Public property accessible from parent

• @track: (legacy) Reactive private property (now all fields are reactive by default)

• @wire: Used to read data from Salesforce or call Apex methods declaratively

6. How do you call Apex methods in LWC?

Answer:
Use @wire for reactive access or use import with async/await:

import myMethod from '@salesforce/apex/MyClass.myMethod';

async connectedCallback() {
   const result = await myMethod({ param: value });
}

---

7. What is a Lightning Data Service (LDS)?

Answer:
LDS allows you to access, create, delete, and update records without Apex by using <lightning-record-form>, <lightning-record-edit-form>, etc.

---

8. What are lifecycle hooks in LWC?

Answer:

• constructor(): Initialization

• connectedCallback(): DOM inserted

• renderedCallback(): Render complete

• disconnectedCallback(): Cleanup

• errorCallback(): Error handling

---

9. How do you share data between components that are not in the same DOM hierarchy?

Answer:
Use:

• Lightning Message Service (LMS) – for cross-DOM component communication

• Custom Event – for child-parent or simple scenarios

---

10. What is the role of the js-meta.xml file in LWC?

Answer:
It defines the component’s metadata like:

• Component visibility (targets: lightning__RecordPage, etc.)

• API version

• Configuration parameters

11. What are wire adapters and how do they differ from imperative calls?

Answer:

• @wire: Declarative, automatic, reactive to parameter changes

• Imperative: Manual call using async/await or .then()

---

12. Explain Shadow DOM in LWC.

Answer:
Shadow DOM encapsulates the component’s styles and DOM so they don’t clash with outer components. It ensures style and structure isolation.

---

13. What are decorators in LWC?

Answer:
Decorators like @api, @track, and @wire are used to annotate properties and methods to control accessibility, reactivity, or data binding.

---

14. How do you handle errors in LWC?

Answer:

• Use try/catch in imperative Apex calls

• errorCallback() for component-level errors

• Handle error responses gracefully in the UI

---

15. What are some performance optimization tips in LWC?

Answer:

• Use @wire where possible

• Avoid large DOM re-renders

• Use pagination for large datasets

• Debounce input handlers

• Use Lightning Data Table efficiently

---

Salesforce LWC scenario based interview questions

 

Component Communication

1. Scenario: You have a parent component showing a list of accounts, and each account has a child component for showing contacts. How would you send the selected account record from parent to child?

   • Follow-up: How would the child notify the parent when a contact is selected?

2. Scenario: How would you handle communication between two sibling LWC components placed on the same Lightning Page?

---

🔹 Data Handling & Apex Integration

3. Scenario: You need to fetch a list of Opportunities and display them in a table. But the list needs to update dynamically every time a new Opportunity is created. How would you achieve this?

4. Scenario: You call an Apex method from LWC that returns a large amount of data. What techniques can you use to improve performance and reduce load time?

---

🔹 Error Handling

5. Scenario: Your component uses @wire to fetch records. How do you handle errors from the wire service and display appropriate messages to the user?

6. Scenario: You are invoking an Apex method imperatively and it returns an exception. How do you gracefully handle and log the error?

---

🔹 Custom Events & Event Propagation

7. Scenario: You have a nested LWC structure (Parent → Intermediate → Child). The child fires an event. How does the parent catch it?

---

🔹 Navigation & Record Handling

8. Scenario: You need to create a custom component that opens a record in edit mode when a user clicks a button. How would you do that using LWC?

9. Scenario: How do you handle record creation in LWC and redirect the user to the record detail page once it's saved?

---

🔹 Lifecycle & Rendering

10. Scenario: Your LWC fetches records in connectedCallback() but data changes are not reflected when the user navigates back to the component. How do you fix that?

11. Scenario: You need to perform a DOM operation only after the component renders completely. Which lifecycle hook will you use?

---

🔹 Design & Reusability

12. Scenario: You are designing a component that will be used on multiple record pages for different objects. How would you make it dynamic to handle any object?

---

🔹 Security & Performance

13. Scenario: Your LWC is throwing a FIELD_INTEGRITY_EXCEPTION when trying to access a field. What could be the cause and how do you resolve it?

14. Scenario: How would you lazy-load data in an LWC to improve performance on large datasets?

---

🔹 Testing & Debugging

15. Scenario: Your LWC is not rendering data as expected, but no errors are shown. How do you debug the issue?

---

✅ 1. Parent to Child Communication in LWC

Q: You have a parent component showing a list of accounts and each account is passed to a child component. How do you pass data from parent to child?

A:
Use @api property in the child component to accept data from the parent.

Child Component:

js
// childComponent.js
import { LightningElement, api } from 'lwc';

export default class ChildComponent extends LightningElement {
    @api accountRecord;
}

Parent Component:

html
<template>
    <template for:each={accountList} for:item="acc">
        <c-child-component key={acc.Id} account-record={acc}></c-child-component>
    </template>
</template>

---

✅ 2. Child to Parent Communication

Q: How would a child component notify the parent when a contact is selected?

A:
Use Custom Events in the child and handle it in the parent.

Child Component:

js
handleContactSelect() {
    const event = new CustomEvent('contactselected', {
        detail: { contactId: this.selectedContactId }
    });
    this.dispatchEvent(event);
}

Parent Component HTML:

html
<c-child-component oncontactselected={handleContactSelection}></c-child-component>

Parent JS:

js
handleContactSelection(event) {
    const contactId = event.detail.contactId;
    // Do something with the selected contact ID
}

---

✅ 3. Fetching Dynamic Records with Refresh

Q: How to refresh a wire when a new record is created?

A:
Use refreshApex() after creating the new record.

js
import { refreshApex } from '@salesforce/apex';
import getOpportunities from '@salesforce/apex/OpportunityController.getOpportunities';

@wire(getOpportunities)
opps;

createOpportunity() {
    // Call Apex to create opportunity
    createOpp().then(() => {
        refreshApex(this.opps);
    });
}

---

✅ 4. Handling Errors in Wire Service

Q: How do you handle errors returned from wire services?

A:

js
@wire(getAccounts)
wiredAccounts({ error, data }) {
    if (data) {
        this.accounts = data;
    } else if (error) {
        console.error('Error:', error);
        this.error = 'Failed to load accounts';
    }
}

---

✅ 5. Navigate to Record Page

Q: How to navigate to a record page in edit mode?

A:
Use NavigationMixin.

js
import { NavigationMixin } from 'lightning/navigation';

export default class NavigateToRecord extends NavigationMixin(LightningElement) {
    navigateToEditRecord() {
        this[NavigationMixin.Navigate]({
            type: 'standard__recordPage',
            attributes: {
                recordId: this.recordId,
                objectApiName: 'Account',
                actionName: 'edit'
            }
        });
    }
}

---

✅ 6. Sibling Component Communication

Q: How do sibling LWC components on the same Lightning Page communicate?

A:
Use Lightning Message Service (LMS).

Step 1: Create Message Channel (via messageChannels folder in metadata)

Step 2: Publish Message in Sender

js
import { publish, MessageContext } from 'lightning/messageService';
import SAMPLEMC from '@salesforce/messageChannel/SampleMessageChannel__c';

@wire(MessageContext)
messageContext;

publishMessage() {
    const payload = { recordId: '001XXXXXXXXXXXX' };
    publish(this.messageContext, SAMPLEMC, payload);
}

Step 3: Subscribe in Receiver

js
import { subscribe, MessageContext } from 'lightning/messageService';

@wire(MessageContext)
messageContext;

connectedCallback() {
    this.subscription = subscribe(this.messageContext, SAMPLEMC, (message) => {
        this.handleMessage(message);
    });
}

---

✅ 7. Lazy Loading Data for Performance

Q: How can you implement lazy loading in an LWC data table?

A:
Use onscroll or the onloadmore event of lightning-datatable.

html
<lightning-datatable
    key-field="id"
    data={data}
    columns={columns}
    onloadmore={loadMoreData}>
</lightning-datatable>

js
loadMoreData(event) {
    // Fetch next set of records and append to this.data
}

---

✅ 8. Dynamic Component for Any Object

Q: How do you build a reusable component that can show records for any object?

A:
Use @api objectApiName and @wire(getObjectInfo).

js
@api objectApiName;

@wire(getObjectInfo, { objectApiName: '$objectApiName' })
objectInfo;

This allows the component to behave differently based on the object type passed from parent or app builder.

---

✅ 9. Accessing Related Fields in Apex

Q: You’re getting a FIELD_INTEGRITY_EXCEPTION when accessing a related field. What’s the issue?

A:
Likely causes:

• Field is not accessible due to FLS.

• Incorrect field path in Apex query (e.g., Account.Name should be accessible only if you include it in SELECT).

• Check for null parent objects (e.g., Opportunity.Account.Name → Opportunity.Account might be null).

---

✅ 10. Lifecycle Hook for DOM Access

Q: You want to manipulate the DOM after the component is rendered. Which hook do you use?

A:
Use renderedCallback().

js
renderedCallback() {
    const element = this.template.querySelector('.myClass');
    // Manipulate element
}