Salesforce Interview Questions: Important Interview Questions on Lightning Web Components

Q 1: What is Lightning Web Component ?

https://knowledgepredator.com/2020/06…

Q 2: What was the need Lightning Web Component ?

https://knowledgepredator.com/2020/06…

Q 3: What difference you feel while working with Lightning Web Component as compared to Aura Component? https://knowledgepredator.com/2020/06…

Q 4: What are benefits of LWC?

https://knowledgepredator.com/2020/06…

Q 5: Can we use LWC inside Aura and Vice-Versa?

https://knowledgepredator.com/2020/06…

Q 6: Can we communicate between aura and LWC Components?

https://knowledgepredator.com/2020/06…

Q 7: What are life Cycle Hooks in LWC?

https://knowledgepredator.com/2020/06…

Q 8: What are decorators in LWC?

https://knowledgepredator.com/2020/06…

Q 9:What is use of @api and @track Decorators?

https://knowledgepredator.com/2020/06…

Q 10: Explain @wire decorator?

https://knowledgepredator.com/2020/06…

Q 11: Is it mandatory to write cacheable = true for aura enabled method bind with @wire decorator?

https://knowledgepredator.com/2020/06…

Q 12: What is imperative call to Server in LWC?

https://knowledgepredator.com/2020/06…

Q 13: Can we write cacheable = true on server side method called using imperative way in LWC? https://knowledgepredator.com/2020/06…

Q 14: What is one-way binding and two way binding. Which one is there in LWC?

https://www.youtube.com/watch?v=ZEMpM…

Q 15: Can we make the Wire method to refresh forcefully and bring fresh data from server?

Yes we can do that. Use refreshApex method to acvhieve this.

https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.apex_result_caching

Q 16: What are custom Events in LWC?

https://knowledgepredator.com/2020/06…

Q 17: How can we communicate from parent component to child component in LWC ? https://knowledgepredator.com/2020/06…

Q 18: How can we communicate from child component to parent component in LWC ? https://knowledgepredator.com/2020/06…

Q 19: How can we pass data from parent component to child component in LWC ?

https://knowledgepredator.com/2020/06…

Q 20: Can we call child Component method from parent in LWC?

https://knowledgepredator.com/2020/06…

Q 21: How can we communicate between unrelated components in LWC?

https://knowledgepredator.com/2020/06…

Q 22: What is pub sub in LWC?

https://knowledgepredator.com/2020/06…

Q 23: What is Lightning Message Service in LWC?

https://developer.salesforce.com/docs/component-library/bundle/lightning-message-service/documentation

Q 24: Explain the Folder Structure of LWC Component?

https://knowledgepredator.com/2020/06…

Q 25: Can we include more than one JavaScript file in LWC Component?

https://knowledgepredator.com/2020/06…

Q 26: Can we include more than one HTML file in LWC Component?

https://knowledgepredator.com/2020/06…

Q 27: How can we include LWC Component inside Home Page, Record Page or App Page in Salesforce? https://knowledgepredator.com/2020/06…

Q 28: How can we add Spinners in LWC?

https://knowledgepredator.com/2020/06…

Q 29: How can we add Toast Messages in LWC?

https://knowledgepredator.com/2020/06…

Q 30: How to include LWC Component inside VF Page?

We can include our lwc component inside aura component. Then use lightning out feature to include that aura lightning component inside VF page

Q 31: How to communicate between Aura and LWC component?

We can achieve this using custom events.

Q 32: What is Validity Attribute in LWC?

https://www.youtube.com/watch?v=n3zrp…

Q 33: How to set custom validity in LWC?

https://www.youtube.com/watch?v=n3zrp…

Please check below video if you want to know the detailed explaination of all these questions:

10 Most Important Interview Questions for Salesforce – Aura Components

1. What is difference between the way we implement VF Page and Lightning.

Visualforce Page:
VF page framework follows page-centric model as it sends that request to the Salesforce servers and then reloads the entire page with the new state of the UI(using view state) In VF page most of the processing takes place on the server-side. VF page was developed keeping in mind the desktop websites.

Lightning Component :
Aura Component framework follows App-Centric Model as most of the work is done at client side and call to server is made only when its essentially required like updating records etc. Aura Component framework was built keeping the mobile first approach.

2. What are different files in Aura Component ?

  • Component: It contains HTML like markup which is responsible for displaying UI components.
  • Controller: It handles the client side events and behaviour for UI components.
  • Helper: Helper file is used to write common logic which can be used by different controller methods.
  • Style: We can add CSS for UI components in this file.
  • Documentation: We can add comments, components description here.
  • Renderer: This file contains the default rendering behaviour of a component.
  • SVG: We can plae SVG icons here such as the icon which gets displayed before the component name in the Lightning App Builder.
  • Design: This component controls which attribute we can expose to tools like the Lightning App Builder. It helps with component re-usability.

3. What are events in Aura components ?

Events are used to provide communication between various components in Aura applications, for example passing arguments etc.

There are diffrent types of events in Aura Components :

System events like init events which are automatically triggered during component life cycles.

Component Events, Application events.

4. What are difference between Component events and Application events in Aura Components?

Component Events :

A component event can either be handled by the component itself or it can be handled by any other component which is present in the hierarchy above the component.For Example, if we have two components say parent and child, and we want to pass paramters from child to parent than, we can use component events for this.

Application Events :

Application events can be fired from any component and they can be handled by any component. No relation is required between the components, but these components must be a part of a single application. These events are essentially a traditional publish-subscribe model.

5. How to include Aura Component inside VF page?

  1. Add <apex:includeLightning/> at the beginning of your page
  2. Create an aura:application and add dependencies by extending lightning out.
<aura:application access="GLOBAL" extends="ltng:outApp">     <c:demoComp/>
</aura:application>

3. Use Lightning Application inside VF page and create the component inside it.

<apex:page standardController=”Account”>        
    <apex:includeLightning />
    <script>
        $Lightning.use(“c:demoApp”, function() {
            $Lightning.createComponent(
                “c:demoComp”,
                {},
                “test”,
                function(cmp) {
                    console.log(“Component is created!”);
              
                });
            });        
      </script>
</apex:page>

6. What are bound and unbound expression in Aura Components?

There are two ways in which we can use expression in aura components and also pass value to child component attriutes from parent components.

Below is the bound expression. If you pass the value this way, then any change to value in child component is also reflected in the parent ccomponent.

<c:child childAttr="{!v.parentAttr}" />

Below is the unbound expression. If you pass the value this way, then any change to value in child component is not reflected in the parent ccomponent.

<c:child childAttr="{#v.parentAttr}" />

7. What are Aura Methods in Aura Components?

For passing the values from child to parent or executing parent component’s logic based on certain event in child we can use component events.

But lets say, we want to pass paramters to child component from parent or want to execute certain logic of child compoent based on certain events in parent component, we can use Aura Methods for this.

ChildComponent.cmp

<aura:component>
    <aura:method name="childMethod" action="{!c.handleMethod}" access="public">
        <aura:attribute name="firstName" type="String" default="Salesforce"/> 
    </aura:method>
</aura:component>

ChildComponentController.js

({
    handleMethod : function(component, event) {
        var params = event.getParam('firstName');
        if (params) {
			console.log('First Name from parent is #' + params);
        }
    }
})

parentCmp.cmp

<aura:component>  
        <c:ChildComponent aura:id="childCmp"/>
        <lightning:button variant="brand" label="Call Child Method" onclick="{!c.callAuraMethod}" />
</aura:component>

parentCmpController.js

({
    callAuraMethod : function(component, event, helper) {
        var childComponent = component.find("childCmp");
        var message = childComponent.childMethod();
    }
})

8. If we have two components say parent and child in Aura, whose init event is fired first?

Always child init gets fired first. However, if you want to fire parent’s init first you can achieve it.

Check below link for more detailed answer on this:

https://knowledgepredator.com/2020/05/30/aura-init-execution-order/

9. Can We have two methods with same name in Controller.js and helper.js files in Aura Components?

Surprisingly, yes we can have two methods with same name in either controller or helper files. Check below link for more detailed answer on this.

https://knowledgepredator.com/2020/06/08/aura-components-interesting-scenarios/

10. What are different interfaces in Aura Components ?

Lightning Interfaces uses to allow components to be used in different contexts or enable the lightning component to receive extra context data. A Lightning component can use multiple interfaces.

Examples:

flexipage:availableForAllPageTypes component to be available for all pages.

flexipage:availableForRecordHome component to be available only on the record home page.

force:lightningQuickAction component to be used as quick action.