🚀50 Real-Time LWC Scenario Q&A (2025) | Complete Salesforce Developer Guide

Published On: November 30, 2025

Lightning Web Components (LWC) continues to dominate Salesforce development in 2025.
Whether you’re preparing for a Salesforce Developer interview or building complex UI solutions,
scenario-based questions are the MOST asked.

This blog covers 50 real-time LWC scenario-based interview questions in a structured format:

👉 What they asked me
👉 What I said
👉 Tips / Best practices

These answers reflect actual project-level examples, updated LWC patterns, UI API, Apex best practices, and 2025 interview standards.

📌 Table of Contents

Component Communication
Data Handling & Refreshing
UI Rendering & Modals
Apex Integration
LDS/UI API
Datatables & Forms
Pagination & Search
Performance Optimization
Navigation & Validation
Real-Time Integrations
Error Handling & Testing
File Upload, Picklists, Messaging
10+ Additional Real-Time Scenarios

1. Parent → Child & Child → Parent Communication

Table of Contents

What they asked me

“How do you pass data between parent and child LWCs?”

What I said

I explained both directions clearly:

Parent → Child (using @api)

// parent.html
<c-child info={accountInfo}></c-child>

Child → Parent (using CustomEvent)

// child.js
this.dispatchEvent(
    new CustomEvent("update", {
        detail: { city: this.city, postal: this.postal }
    })
);

Tips

Use @api for public properties.
Use events for upward communication.
Use LMS for cross-page or Aura ↔ LWC communication.

2. Cross-DOM Communication (Unrelated Components)

What they asked me

“In your project how did two LWCs on different pages talk to each other?”

What I said

Using Lightning Message Service (LMS):

publish(this.messageContext, SAMPLE_MC, { data: this.value });

Tips

LMS works across:

LWC ↔ LWC
LWC ↔ Aura
LWC ↔ Utility Bar
LWC ↔ Flows

3. LWC Not Refreshing After DML

What they asked me

“Apex ran DML but the UI didn’t refresh. What did you do?”

What I said

In older pattern:

refreshApex(this.wiredList);

Modern way (2025):

import { refresh } from 'lightning/uiRecordApi';
refresh(this.recordWire);

Tips

Always mention refresh wire adapter — interviewers expect 2024+ answer.

4. Re-fetching Only Changed Data

What they asked me

“How did you avoid reloading full data after DML?”

What I said

I used:

LDS partial refresh
refresh(recordApi)
Apex selective SOQL queries (fetch only affected part)

Tips

Never reload all data blindly.

5. Imperative Apex Call With Error Handling

What they asked me

“How do you call Apex on button click with error logging?”

What I said

Used async/await:

try {
   const result = await updateContact({ conId: this.recordId });
} catch(error) {
   this.showToast('Error', error.body.message, 'error');
}

Tips

Mention:

centralized error handler
Platform logging
ShowToastEvent

6. Handling Multiple Apex Calls Together

What they asked me

“How do you handle multiple dependent Apex calls?”

What I said

Parallel:

Promise.all([getAcc(), getCon(), getCases()])

Sequential (if dependent):

const acc = await getAcc();
const con = await getCon({ accId: acc.Id });

Tips

Explain spinner & exception handling.

7. Inline Edit + Row Actions

What they asked me

“How did you implement inline edit in datatable?”

What I said

Save inline edits:

handleSave(event) {
  updateRecords({ data: event.detail.draftValues })
    .then(() => refreshApex(this.wiredData));
}

Tips

Mention:

draftValues
onsave event
Refresh strategy

8. Custom LWC inside Datatable Cell

What they asked me

“How did you pass row-wise record Id to custom cell LWC?”

What I said

{ 
   type: 'customCell',
   typeAttributes: {
      recordId: { fieldName: 'Id' }
   }
}

Tips

Use LightningDatatable extended.

9. When Should You Use UI API Instead of Apex?

What they asked me

“Tell a real scenario where you replaced Apex with LDS.”

What I said

I explained I replaced Apex when:

Only single record fetch
CRUD/FLS needed
No complex SOQL

Example:

import { getRecord } from 'lightning/uiRecordApi';

Tips

Mention: UI API = auto FLS + faster + cached.

10. Custom Validation Before Submit

What they asked me

“How did you stop form submission if validation fails?”

What I said

this.template.querySelector("lightning-input")
 .setCustomValidity("Invalid postal code");

Then:

input.reportValidity();

Tips

LWC validation > Aura validation (cleaner).

11. Dynamic Picklist Without Apex

What they asked me

“How did you load dependent picklists?”

What I said

getPicklistValuesByRecordType

Which returns controller–dependent metadata.

Tips

NO Apex needed for picklists now.

12. Server-Side Pagination

What they asked me

“How did you handle large data (>50k records)?”

What I said

Approach:

SOQL with LIMIT/OFFSET
Apex returns 50 records per page
LWC controls next/prev page

Tips

Discuss limits:

OFFSET Max = 2000 rows
For big data → QueryMore pattern

13. Debounced Search Bar

What they asked me

“How did you avoid multiple Apex calls during search?”

What I said

clearTimeout(this.delayTimer);
this.delayTimer = setTimeout(() => {
   this.searchData();
}, 400);

14. LWC Performance Techniques

What they asked me

“What did you do when your component loaded slowly?”

What I said

I applied:

Debounce
UI API caching
Lazy load JS (import module dynamically)
Reduce DOM renders
Limit reactive variables
Used Pagination

Tips

Mention Shadow DOM performance.

15. Navigation to Record / List / Object

What they asked me

“How do you navigate from LWC?”

What I said

Use NavigationMixin.

Example:

this[NavigationMixin.Navigate]({
    type: 'standard__recordPage',
    attributes: { recordId, actionName: 'view' }
});

16. Live Data Sync

What they asked me

“How do you refresh UI automatically when a record changes?”

What I said

Using:

Change Data Capture (CDC)
CometD
LMS

17. LWC Error Boundary

What they asked me

“How do you catch component-level errors?”

What I said

errorCallback(error, stack) {
    console.error(error, stack);
}

18. File Upload Handling

What they asked me

“How did you upload files to a record?”

What I said

Used:

<lightning-file-upload record-id={recordId}></lightning-file-upload>

Or custom Apex for ContentVersion.

19. Testing LWC With Jest

What they asked me

“How do you mock wire services?”

What I said

Use:

jest.mock('lightning/uiRecordApi');

Then verify DOM after re-render.

20. Preventing Double Submit in LWC

What they asked me

“In your LWC, when the user clicked the button twice, the Apex method ran twice. How did you prevent double-submit?”

What I said

I used an isLoading boolean to disable the button immediately after first click.

<lightning-button 
    label="Save"
    disabled={isLoading}
    onclick={handleSave}>
</lightning-button>

handleSave() {
    this.isLoading = true;
    saveData({ recordId: this.recordId })
        .then(() => { this.showToast('Success'); })
        .finally(() => { this.isLoading = false; });
}

Tips

Disable button on first click
Show spinner during operation
Server should also block duplicate operations

21. Using Shared JavaScript Utility Across Multiple LWCs

What they asked me

“Your project had repetitive formatting logic. How did you avoid duplicate code across components?”

What I said

I created a shared JS module under /modules/utility/formatter.js, then imported it across LWCs.

// modules/utility/formatter.js
export function formatPhone(phone) { ... }

Usage:

import { formatPhone } from 'c/formatter';

Tips

Shows clean architecture thinking
Reduces duplicate code
Reusable across LWC/Aura

22. Enforcing CRUD & FLS Without Apex

What they asked me

“How do you enforce CRUD/FLS in LWC without writing Apex checks?”

What I said

UI API automatically applies:

Field-level security
Object CRUD
Record sharing rules

Example:

import { getRecordUi } from 'lightning/uiRecordApi';

@api openModal() { this.show = true; }
@api closeModal() { this.show = false; }

Parent:

<c-modal lwc:ref="modal"></c-modal>
<lightning-button onclick={openModal}></lightning-button>

Tips

Modern and professional approach for reusable modals.

26. Dynamic Forms Generated from Metadata

What they asked me

“How did you build a form where fields changed based on picklist value?”

What I said

I used Metadata + UI API to build dynamic form:

fields = [
   { label: 'Name', type: 'text', value: this.name },
   { label: 'Age', type: 'number', value: this.age }
];

Rendered using loop:

<template for:each={fields} for:item="f">
    <lightning-input key={f.label} label={f.label} type={f.type}></lightning-input>
</template>

Tips

Shows advanced UI logic — interviewers love this.

27. Bulk Updating Records in LWC

What they asked me

“How did you bulk update selected rows in a datatable?”

What I said

I collected selected rows then passed the array to Apex:

handleBulkSave() {
   updateInBulk({ records: this.selectedRows })
    .then(() => this.refresh());
}

Tips

Never loop DML in Apex
Use List<SObject>

28. Pre-Fill Fields in LWC Using getRecord

What they asked me

“How did you pre-populate form fields when editing?”

What I said

@wire(getRecord, { recordId: '$recordId', fields })
wiredRecord({ data }) {
    this.name = data.fields.Name.value;
}

Tips

UI API is faster than Apex for single record fetch.

29. Communication Between LWC & Aura

What they asked me

“How did you communicate between Aura component and LWC?”

What I said

Two ways:

LWC → Aura

Use CustomEvent

Aura → LWC

Use aura:id and @api methods.

30. Using LWC Inside a Flow (Screen Component)

What they asked me

“How did you pass data from Flow to LWC and back?”

What I said

I used Flow-supported decorators:

@api value
@api label
@api availableActions
@api invoke()

Output:

@api resultValue;

Tips

Mention: LWC is now preferred over Aura for Flow screens.

31. Reusable Pagination Component

What they asked me

“How did you build pagination that can be reused across pages?”

What I said

I built a separate LWC:

<c-pagination total={totalRecords} onnext={handleNext}></c-pagination>

Tips

Most enterprise apps need reusable pagination.

32. Lazy Loading on Tab Click

What they asked me

“You had multiple tabs in your UI. How did you load data only when needed?”

What I said

In tab change handler:

handleTabChange(event) {
   if (event.target.value === 'contacts') {
      this.loadContacts();
   }
}

Tips

This improves performance drastically.

33. When You Must Use Apex Instead of UI API

What they asked me

“Give examples where UI API will not work.”

What I said

I used Apex when:

Need aggregate SOQL (SUM, GROUP BY)
Need complex joins
Need more than 2 object relations
Need more than 200 fields

Tips

Important to show that you choose Apex only when required.

34. Storing Temporary Values (Session Storage)

What they asked me

“How did you store unsaved form data?”

What I said

sessionStorage.setItem("draftAccount", JSON.stringify(this.form));

Tips

Helps in long multi-step forms.

35. Styling Child LWC from Parent (Shadow DOM Issue)

What they asked me

“How did you apply CSS to child LWC which is in Shadow DOM?”

What I said

I used:

CSS Custom Properties
or a shared static resource stylesheet

Example:

:host {
  --custom-color: red;
}

Child component uses:

color: var(--custom-color);

36. Record Permission Enforcement

What they asked me

“How did you disable edit buttons for users without access?”

What I said

Checked permissions via:

import { getRecordUi } from 'lightning/uiRecordApi';

This returns:

editable
updateable
readable

Tips

LWC + UI API = safest way to enforce security.

37. Search + Pagination Together

What they asked me

“How did you apply both search & pagination?”

What I said

Sent both to Apex:

searchText: this.searchKey,
pageNumber: this.page

Apex applies both:

WHERE Name LIKE :('%'+search+'%')
LIMIT 50 OFFSET :offset

38. Dynamic Icon Rendering Based on Value

What they asked me

“How did you conditionally render icons?”

What I said

get iconName() {
   return this.status === 'Active' ? 'utility:success' : 'utility:error';
}

39. Email Validation Using Regex

What they asked me

“How did you implement custom validation for email?”

What I said

const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

if (!regex.test(this.email)) {
   input.setCustomValidity("Invalid email format");
}

40. Preview PDF / Image in LWC

What they asked me

“How did you preview uploaded files?”

What I said

I used iframe:

<iframe src={filePreviewUrl}></iframe>

Preview URL:

'/sfc/servlet.shepherd/document/download/' + contentVersionId

41. Multi-Object Search in LWC

What they asked me

“How did you search multiple objects from a single search box?”

What I said

I created an Apex wrapper:

public class SearchWrapper {
   @AuraEnabled public List<Account> accounts;
   @AuraEnabled public List<Contact> contacts;
}

LWC displays grouped results.

42. Rendering Charts in LWC

What they asked me

“How did you show charts in LWC?”

What I said

Used Chart.js static resource.

Loaded like:

Promise.all([
   loadScript(this, chartJS)
])

43. Display Rich Text

What they asked me

“How did you show rich HTML or bold/colored text?”

What I said

<lightning-formatted-rich-text value={htmlContent}></lightning-formatted-rich-text>

44. renderedCallback() Real Use Case

What they asked me

“When should you use renderedCallback?”

What I said

I used it for:

Loading external JS
Manipulating DOM once
Scroll positioning

renderedCallback() {
   if (this.loaded) return;
   this.loaded = true;
   this.initChart();
}

ARIA labels
Keyboard navigation
Contrast rules

Example:

<button aria-label="Save Contact"></button>

📚 Bonus: Interview & Project Resources

🔥 Practice with real recruiter-level questions:
👉 Salesforce Interview Mega-Pack — 1000+ Real Questions & Answers

🚀 Build end-to-end Salesforce Projects (with LWC + Trigger + Flow):
👉 Sales Cloud Project for Developers — Hands-On Implementation

Post Views: 352

Lightning Web Components interview Q&A, LWC interview questions 2025, LWC scenario-based interview questions, salesforce developer interview questions, Salesforce LWC real-time scenarios