Advanced Salesforce LWC Interview Questions and Answers 1

What are the key lifecycle hooks in LWC, and how are they used?

• constructor(): Initializes the component. Called when the component instance is created. Avoid performing DOM manipulations here.
• connectedCallback(): Invoked when the component is inserted into the DOM. Use it for setting up initial data or subscribing to events.
• renderedCallback(): Called after every render cycle. Useful for DOM manipulations or post-render logic.
• disconnectedCallback(): Triggered when the component is removed from the DOM. Ideal for cleaning up event listeners or unsubscribing from services.

How do you pass data between components in LWC?

Parent to Child: Use @api decorator to expose properties in the child component.

// Child.js
@api recordId;

<!– Parent.html –>
<c-child record-id=”12345″></c-child>

Child to Parent: Use custom events. Example:

// Child.js
this.dispatchEvent(new CustomEvent(‘save’, { detail: { id: ‘12345’ }}));

<!– Parent.html –>
<c-child onsave={handleSave}></c-child>

Explain the purpose of @api, @track, and @wire decorators?

• @api: Exposes properties/methods to parent components. Enables data flow from parent to child.
• @track: Tracks changes in primitive properties and re-renders the DOM automatically. (No longer needed for objects/arrays since Summer ’20).
• @wire: Invokes Salesforce data or custom Apex methods declaratively. Automatically handles caching. Example:

@wire(getRecord, { recordId: ‘$recordId’, fields: FIELDS }) record;

How do you call an Apex method in LWC? Provide an example. ?

Use @wire for reactive calls or Lightning API for imperative calls. Example of an imperative call:

import { LightningElement } from ‘lwc’;
import getAccountList from ‘@salesforce/apex/AccountController.getAccountList’;

export default class AccountList extends LightningElement {
accounts;
async connectedCallback() {
try {
this.accounts = await getAccountList();
} catch (error) {
console.error(error);
}
}
}

What are the different event phases in LWC, and how do they work?

• Capture Phase: Events propagate from the root to the target element. Use addEventListener with { capture: true } to listen during this phase.
• Target Phase: Event reaches the target element.
• Bubble Phase: Events propagate back to the root. Default behavior of events in LWC.

what is the difference between Async and Await in LWC?

The async and await keywords in LWC (and JavaScript in general) are used together to handle asynchronous operations in a clean and readable way. Here’s the difference and how they work:

1. async Keyword

• Purpose:
  Declares a function as asynchronous. An async function always returns a Promise.
• Behavior:
  • Wraps the return value in a Promise.
  • Allows the use of await within the function to pause execution until a Promise resolves or rejects.

async function fetchData() {
return 'Data fetched'; // Automatically wrapped in a Promise
}
fetchData().then(data => console.log(data)); // Output: Data fetched


2. await Keyword

• Purpose:
  Pauses the execution of an async function until the Promise is resolved or rejected.
• Behavior:
  • Can only be used inside an async function.
  • Simplifies working with asynchronous code by avoiding chaining .then() methods.

async function fetchData() {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
console.log(data); // Output: Parsed JSON data
}
fetchData();


Key Takeaway

• async defines a function as asynchronous, making it easier to handle asynchronous operations.
• await pauses execution inside the async function until a Promise resolves, providing a synchronous-like flow for asynchronous code.

Can you Explain LWC File Structure in details ?

The LWC (Lightning Web Component) File Structure is designed to organize code into logical files that support separation of concerns, modularity, and reusability. Each LWC component resides in its own directory and contains specific files for its template, JavaScript logic, styling, and metadata.

myComponent/
├── myComponent.html
├── myComponent.js
├── myComponent.css
├── myComponent.js-meta.xml

Is it Possible to call Lwc component from Aura and Vice Versa ?

Yes, it is possible to call an LWC component from Aura and vice versa. Here’s how you can achieve both scenarios:

1. Calling an LWC Component from Aura

1. • Ensure the LWC component is exposed to other components using the js-meta.xml file. Add the <isExposed>
   • Use the <lightning:container> tag or embed it directly.

<aura:component>
<c:childLwc message=”Hello from Aura!”></c:childLwc>
</aura:component>

2. Calling an Aura Component from LWC

you may need to call an Aura component from LWC for specific functionality.

import { LightningElement } from ‘lwc’;

export default class ParentLwc extends LightningElement {
handleClick() {
$A.createComponent(
“c:ChildAura”,
{ message: “Hello from LWC!” },
function(newComponent, status, errorMessage) {
if (status === “SUCCESS”) {
// Append to a container element
let body = this.template.querySelector(‘.aura-container’);
body.appendChild(newComponent);
} else if (status === “ERROR”) {
console.error(errorMessage);
}
}
);
}
}

Looking for Salesforce Services click here