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

---