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
}