Scribd
Upload
28 views4 pages

SFDC Interview Questiosn Part 4

Communication between parent and child components in LWC can be achieved through property binding and event handling. The parent component can pass data to the child component using property binding, and the child component can notify the parent component of any events using custom events.

Uploaded by

spouledchild
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
28 views4 pages

SFDC Interview Questiosn Part 4

Communication between parent and child components in LWC can be achieved through property binding and event handling. The parent component can pass data to the child component using property binding, and the child component can notify the parent component of any events using custom events.

Uploaded by

spouledchild
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 4

Interviewer: How can you communicate between parent and child

components in LWC?

Interviewee: Communication between parent and child components in LWC


can be achieved through property binding and event handling. The parent
component can pass data to the child component using property binding, and the
child component can notify the parent component of any events using custom
events.

Parent Component:

Example Code : html

1<template>
2 <c-child-component message="{parentMessage}" oncustomevent="{handleEvent}"></c-child-com
3</template>
javascript

1import { LightningElement } from 'lwc';


2
3export default class ParentComponent extends LightningElement {
4 parentMessage = 'Hello from parent';
5
6 handleEvent(event) {
7 const eventData = event.detail;
8 // Handle event data from child component
9 }
10}

Child Component:

javascript

1import { LightningElement } from 'lwc';


2
3export default class ChildComponent extends LightningElement {
4 message = 'Hello from child';
5
6 handleClick() {
7 const customEvent = new CustomEvent('customevent', { detail: 'Event data' });
8 this.dispatchEvent(customEvent);
9 }
10}

Pu
blic
Explanation: In the example code above, we have an input field where the user can
enter their username. The 'handleInputChange' method is called on every input
change, updating the 'username' property and displaying the entered value below
the input field.

Interviewer: What is the role of the wire service in LWC?

Interviewee: The wire service in LWC enables efficient data retrieval and
synchronization with Salesforce data sources. It handles caching, background
execution, and automatic UI updates, resulting in better performance and
responsiveness.

Example Code : javascript

1import { LightningElement, wire } from 'lwc';


2import { getRecord } from 'lightning/uiRecordApi';
3
4const FIELDS = ['Account.Name', 'Account.Phone', 'Account.Website'];
5
6export default class AccountDetails extends LightningElement {
7 @wire(getRecord, { recordId: '001xxxxxxxxxxxxxxx', fields: FIELDS })
8 account;
9
10 get accountName() {
11 return this.account.data ? this.account.data.fields.Name.value : '';
12 }
13}
Explanation: In the example code above, we have a component that uses the wire
service to fetch and display account details from Salesforce. The 'getRecord' wire
adapter retrieves the specified fields from the record with the given ID.

Interviewer: How do you handle errors and exceptions in LWC?

Interviewee: Error handling in LWC can be done using try-catch blocks or


by leveraging the onError lifecycle hook. You can catch exceptions and display
appropriate error messages to the user, ensuring a smooth user experience.

Example Code : html

1<template>

Pu
blic
2try {
3 // Code that may throw an exception
4} catch (error) {
5 // Handle the error and display an error message
6}
7</template>
Explanation: In the example code above, we have a try-catch block that wraps the
code that might throw an exception. If an exception occurs, it is caught in the catch
block, allowing you to handle the error gracefully.

Interviewer: What are the lifecycle hooks in LWC, and how do they work?

Interviewee: LWC provides various lifecycle hooks that allow you to


perform actions at specific stages of a component's lifecycle. Examples include
connectedCallback, renderedCallback, and disconnectedCallback. These hooks help
manage component initialization, rendering, and cleanup.

Example Code : javascript

1import { LightningElement } from 'lwc';


2
3export default class LifecycleExample extends LightningElement {
4 connectedCallback() {
5 // Perform initialization tasks when the component is connected to the DOM
6 }
7
8 renderedCallback() {
9 // Perform tasks after the component has been rendered or updated
10 }
11
12 disconnectedCallback() {
13 // Perform cleanup tasks when the component is removed from the DOM
14 }
15}
Explanation: In the example code above, we have a component that demonstrates
the usage of connectedCallback, renderedCallback, and disconnectedCallback. These
hooks allow you to execute custom logic at specific stages of the component's
lifecycle.

Interviewer: How do you use LWC lifecycle hooks to fetch data from an
external source?

Pu
blic
Interviewee: To fetch data from an external source using LWC lifecycle
hooks, you can use the `connectedCallback()` method.
The `connectedCallback()` lifecycle hook is called when the component is
inserted into the DOM tree. This is a suitable place to perform data fetching
operations, as it ensures the component is ready to interact with the DOM.

Here's an example of how you can use the `connectedCallback()` method to


fetch data from an external source:

Example Code : javascript

1// dataFetchExample.js
2import { LightningElement, track } from 'lwc';
3import fetchDataFromExternalSource from '@salesforce/apex/ExampleController.fetchDataFrom
4
5export default class DataFetchExample extends LightningElement {
6 @track data; // Use @track to track changes to the data variable
7
8 connectedCallback() {
9 this.loadDataFromExternalSource();
10 }
11
12 loadDataFromExternalSource() {
13 fetchDataFromExternalSource()
14 .then(result => {
15 // Process the data as needed
16 this.data = result;
17 })
18 .catch(error => {
19 // Handle error, if any
20 console.error('Error fetching data: ', error);
21 });
22 }
23}
In this example, the `connectedCallback()` method is overridden in the LWC component. Insi
the `loadDataFromExternalSource()` function is called to perform the data fetching operatio
The `fetchDataFromExternalSource()` method is an Apex method annotated with `@AuraE
data from an external source, such as an Apex class, a REST endpoint, or a third-party API.

By using the `connectedCallback()` hook, the data will be fetched as soon as the component
tree, ensuring that the component is ready to display the data when it becomes available.

Pu
blic

You might also like