Development
Salesforce LWC Interview Questions and Answers Experienced
1. What are @track, @api, and @wire decorators in LWC?
Ans: @track makes a field reactive in older versions, @api exposes a field to parent components, and @wire is used to call data from Apex or Salesforce services reactively.
2. Explain folder structure of an LWC component.
Ans: Each LWC has a folder containing three files: .js (JavaScript), .html (template), and .js-meta.xml (configuration). Optional files include .css and test files.
3. What is the pubsub model and when should you use it?
Ans: Pubsub (publish-subscribe) is used for component communication between sibling components in the same DOM hierarchy. It's suitable for Lightning App pages, not Lightning Record Pages.
4. What is Lightning Message Service (LMS)?
Ans: LMS allows communication between LWC, Aura, and Visualforce components using a unified messaging channel, across DOM boundaries, and works well in all page types.
5. How does parent-to-child communication work in LWC?
Ans: Parent can pass data to child using @api decorated properties or call methods decorated with @api on the child component.
6. How does child-to-parent communication work?
Ans: Child components can emit custom events, and parent components can handle them using on:eventname in markup.
7. Explain conditional rendering in LWC.
Ans: Use template if:true or template if:false blocks in HTML to conditionally render elements based on a boolean value in the JS controller.
8. How do you iterate over a list in LWC?
Ans: Use template for:each and for:item to loop through an array and render elements dynamically.
9. What is Lightning Data Service (LDS)?
Ans: LDS simplifies data access without Apex. Use <lightning-record-form>, <lightning-record-edit-form>, or <lightning-record-view-form> to view, edit, or create records.
10. What is the difference between @wire and imperative Apex method calls?
Ans: @wire is reactive and automatically re-fetches data, whereas imperative calls use functions triggered by user actions (like click).
11. What is imperative method calling in LWC?
Ans:
Imperative method calling involves explicitly calling an Apex method or Salesforce API from JavaScript using a promise-based approach, instead of using @wire. For example:
import { getRecord } from 'lightning/uiRecordApi'; getRecord({ recordId: 'recordId' }).then(result => { ... });
It’s used when more control over the call is needed, such as on a button click.
12. What is an Apex controller method with @AuraEnabled?
Ans:
An Apex method annotated with @AuraEnabled is exposed to Lightning components (LWC or Aura) for server-side logic. It allows the client-side JavaScript to call the method via @wire or imperatively. Example:
@AuraEnabled public static String getData() { return 'Hello'; }
13. What does (cacheable=true) mean in @AuraEnabled?
Ans:
The (cacheable=true) annotation in an @AuraEnabled Apex method indicates that the method’s results can be cached on the client side to improve performance. It’s required for methods called via @wire in LWC. The method must be static and not modify data (e.g., no DML operations).
14. How do you call an LWC component from a Visualforce page?
Ans:
To call an LWC component from a Visualforce page, use the lightning:container or lightning:component tag in the VF page. Alternatively, embed the LWC in an Aura component and include the Aura component in the VF page using <apex:includeLightning/>. Ensure the LWC is exposed in its .js-meta.xml with <isExposed>true</isExposed>.
15. What is the difference between LWC and Aura components?
Ans: LWC is a modern, standards-based framework using Web Components, offering better performance and simpler development compared to Aura. Aura uses a proprietary framework, is slower, and has a more complex event model. LWC supports modern JavaScript, has no two-way data binding, and is the preferred choice for new development.
16. How do you handle errors in LWC?
Ans:
Errors in LWC can be handled using try-catch blocks for imperative Apex calls or by checking the error property in @wire responses. Example:
@wire(getRecord, { recordId: '$recordId' }) wiredRecord({ error, data }) { if (error) { console.error(error); } }
Additionally, use lightning-messages to display errors to users.
17. How do you use slots in LWC?
Ans:
Slots in LWC allow a parent component to inject content into a child component’s template. The child defines a <slot> tag in its HTML, and the parent provides content within the child component’s tag. Named slots can be used for specific content areas, e.g., <slot name="header">.
18. What is the use of the lightning/ui*Api modules?
Ans:
The lightning/ui*Api modules (e.g., lightning/uiRecordApi, lightning/uiObjectInfoApi) provide standard APIs for interacting with Salesforce data and metadata in LWC. They allow operations like retrieving records, creating records, or fetching object metadata without writing Apex, using methods like getRecord or createRecord.
19. How do you make an LWC component reusable?
Ans:
To make an LWC component reusable, use @api decorators to expose properties and methods, ensure the component is stateless or modular, use slots for flexible content injection, and define clear inputs/outputs. Additionally, configure the .js-meta.xml to make the component available in multiple contexts (e.g., App Builder, Flow).
20. What are lifecycle hooks in LWC?
Ans:
Lifecycle hooks in LWC are methods that execute at specific stages of a component’s lifecycle:
- connectedCallback(): When the component is inserted into the DOM.
- disconnectedCallback(): When the component is removed from the DOM.
- renderedCallback(): After the component’s template is rendered.
- errorCallback(error, stack): To handle errors during rendering or in child components.