Lightning Web Component Interview Questions

1. How many ways we can call Apex method from Lightning Web Component?
A. 3 ways to call apex method from LWC, 1. Wire to a property 2. Wire to a function 3. Imperatively.

2. How to get the updated data when I click on refresh button in LWC?
A. refreshApex method(refresh of cache) if it is imperatively then call getRecordNotifyChange().

3. What is the difference between lightning-record-form, lightning:recordEditForm, lightning:recordViewForm?

A. 

4. What is the use of Lightning Navigation Service in LWC and also what is the use of NavigationMixin in LWC?
A. To navigate in Lightning Experience, Lightning Communities, and the Salesforce app, use the navigation service, lightning/navigation.

The lightning/navigation service is supported only in Lightning Experience, Lightning Communities, and the Salesforce app. It isn’t supported in other containers, such as Lightning Components for Visualforce, or Lightning Out. This is true even if you access these containers inside Lightning Experience or the Salesforce app. 

We can use navigation services in LWC to Navigate to Pages, Records, and Lists.
Here are the steps to use Navigation Service.
1. We need to import lightning/navigation module.
2. Apply the NavigationMixin function to your component’s base class.
export default class MyCustomElement extends NavigationMixin(LightningElement) {}
3. Create a plain JavaScript PageReference object that defines the page.
4. To dispatch the navigation request, call the navigation service’s [NavigationMixin.Navigate](pageReference, [replace])
navigateNext() {
       this[NavigationMixin.Navigate]({
           type: 'standard__navItemPage',
           attributes: {
               apiName: this.tabName,
           },
       });
   }
The NavigationMixin adds two APIs to your component’s class. Since these APIs are methods on the class, they must be invoked with this reference.
[NavigationMixin.Navigate](pageReference, [replace]): A component calls this[NavigationMixin.Navigate] to navigate to another page in the application.
[NavigationMixin.GenerateUrl](pageReference): A component calls this[NavigationMixin.GenerateUrl] to get a promise that resolves to the resulting URL. The component can use the URL in the href attribute of an anchor. It can also use the URL to open a new window using the window.open(url) browser API.

5. What is the use of Lightning message services in LWC and what are the methods of Lightning message services in LWC?
A. Use Lightning message service to communicate across the DOM between Visualforce pages, Aura components, and Lightning web components, including components in a pop-out utility bar.

Use the Lightning message service functions to communicate over a Lightning message channel.

In a component's Javascript file, import any exports that you need from the lightning/messageService module. Import a message channel using the scoped module @salesforce/messageChannel.

We can publish a message and subscribe to the message over the same message channel (Pub - Sub Model).

Methods in Lightning message services:

• createMessageContext()
• publish(messageContext, messageChannel, message)
• releaseMessageContext(messageContext)
• subscribe(messageContext, messageChannel, listener, subscriberOptions)
• unsubscribe(subscription)

6. How to get data from child Lightning Web component to parent aura component?
A. Using custom dispatch event in LWC we can pass values into Parent Aura Component. The enclosing Aura component can capture the event and handle it. 

Example of creating and calling event from LWC:
const lwcEvent= new CustomEvent('eventname', {
   detail:{varible1:value, varible2 : value} 
  });
 this.dispatchEvent(lwcEvent);
Handling event from Aura Component:
<c:childLwcComponent oneventName={handleEvent}></c:childLwcComponent>

7. What are Life Cycle Hooks in Lightning Web component?
A. constructor(), connectedCallback(), disconnectedCallback(), renderedCallback() and errorCallback().

these callbacks can be used to run some code at a particular stage of the component life cycle. So the framework provides the above life cycle hooks to do that.

8. What is the difference between wire apex methods and Imperative apex methods?

9. All the properties are reactive by default, then why do we need to use @track decorator?
A. All primitive data types are reactive by default, but the objects and arrays are reactive if only if their references are changed.
For example, the component will not reRender if a single element of an array is changed or the object's property is changed.
To overcome this we need to use the @track annotation with objects and arrays.

10. When do we need to use @api decorator with a function or a property?
A. When we need to expose the property or a function to the parent (container) component then we annotate with @api decorator, In a simple words, to create a public property or a function.

11. How can we pass data from html page to Js controller in lwc?
A. We can use the onchange event in HTML page to get the data into the js controller, whenever the value changes handleChange function in the js file executes and get the data using event.target method.

12. How to send data from parent child component to child component in LWC?
A. We can use @api decorator and pass this property value into the child component as a parameter.
you can check the detail explanation was given here : Pass data from one LWC component to another LWC component using @api decorator

13. What are lightning web component bundle?
A. LWC bundle contains an HTML file, a JavaScript file, and a metadata configuration file and these files are created once we create a Lightning web component. We can also create a .css file for styling purpose and We can also create SVG file for the purpose of displaying icon.

14. How can we  deploy components to production org?
A. We can deploy component by using managed packages, Force.com IDE, Force.com Migration Tool or Change Sets.

15. How we can access Custom Label in Lightning?
A. Syntax : $A.get("$Label.namespace.labelName");

16. What are the types of decorators in lightning web components?
A. We have 3 Decorators in Lightning Web Components.

1. @api
2. @track
3. @wire

17. When we place a LWC component inside the record detail page how can we get the record id into the LWC?

A. We can use a decorator @api to get the record Id with the name recordId, it is the special type of property once this property is embedded into the LWC component it automatically takes the record id from the url address bar and pass to recordId property when the property names with recordId.

18. Can we use LWC in a Quick Action in salesforce?

A. Yes we can use from the release Spring 21, we can directly call the LWC component as a Quick Action. Previously we are embedding the LWC inside the Aura Component and uses LWC as a Quick Action as Aura component only supports in Quick Action.

19. Can we use Aura inside LWC and LWC inside Aura?

A. We can embed LWC inside Aura, but we cannot include Aura inside LWC.

20. How can you display HTML components conditionally?

A. We can display the components conditionally with the help of  if : true | false.

21. How we can iterate list in Lightning Web Component?

A. We can iterate the list of items using 2 types:

1.         For : each
2.         Iterative    

22. What is the file structure of Lightning Web Components?

A. 

• myComponent folder
• myComponent.html
• myComponent.js
• myComponent.js-meta.xml
• myComponent.css
• myComponent.svg

23. How to pass data from child LWC component to parent lightning aura component?

A. Using this.dispactchEvent custom event we can pass the data to parent aura component.

24. How to call child LWC  function from parent LWC function?

A. We can call using the below syntax in Parent LWC function:

syntax: this.template.querySelector('c-child-component').childFunction();

25. How to call child LWC  function from parent Aura component function?

A. We can call using the below syntax in Parent Aura component function:

Syntax: component.find('aura id of child LWC component').childFunction();