All Salesforce Interview Questions And Concepts : Salesforce LWC Quetions

Interview Questions:

1. Can we call the @AuraEnabled function in the apex class using wire ?

Ans: Function also needs to have cacheable = true annotation ie should be like @AuraEnabled(cacheable = true)

2. What do you mean by cacheable = true annotations ?

Ans: First of all when you mark function as cacheable = true it can only retrieve data i.e. it cant have any DML.
It is used to improve component performance by quickly showing cached data from client side storage without waiting for server trip.
Remember to refresh the stale data provisioned by Apex we have to use refreshApex as LDS doesn’t manage data coming from Apex ( In case of wired service).

3. Will the below code deploy? (Assuming all variables and apex class function exists).

@wire(getBoats,{
  boatTypeId : this.boatTypeId
  })
  getBoats(error,data){
  }

Ans: No it wont when passing a variable in wire you should always use $ along with variable, it should be written like
@wire(getBoats,{boatTypeId : ‘$boatTypeId})

4. Why do we use $ when passing property in wire function, what does it mean? [Latest Salesforce lightning interview questions and answers]

Ans: $ prefix tells the wire service to treat values passed as a property of the class and evaluate it as this.propertyName and the property is reactive. If the property’s value changes, new data is provisioned and the component renders.

5. If I want to refresh the wired data in the above function, can I call refreshApex(this.someVar) ?

@wire(getBoats,{boatTypeId : ‘$boatTypeId’})
   getBoats({error,data}){
		if(data){
			this.someVar = data;
			this.error = undefined;
    }
    else if(error){
			this.error = error;
			this.someVar = undefined ;
  }
}

Ans:

No we cant call refreshApex(this.someVar) rather refreshApex is called on whole result provisioned from the wire service not just the data part, we will have to rewrite it as below :

@wire(getBoats,{boatTypeId : ‘$boatTypeId’})
    getBoats(result){
		    this.mainResult = result;
		    if(result.data){
			    this.someVar = result.data;
			    this.error = undefined;
        }
      else if(result.error){
			this.error = result.error;
			this.someVar = undefined ;
    }
}

Now we can refresh data as refreshApex(this.mainResult).

6. Can we call a wire function inside a javascript function like below :

searchBoats(event){
    @wire(getBoats,{ 
        boatTypeId: ‘$boatTypeId’
    }
    getBoats(data,error){
    }
}

Assume searchBoats is being called on click of button? Will I be able to deploy the code ?

Ans: No you cant call it like this , code will not deploy. You will receive error as leading decorators must be attached to class which means decorators like wire can be directly under class only not inside any other function.

Similarly if you try to define variable with @track or api decorator inside a function it will fail.

7. When is the wire method/property called in the lifecycle of a component ?

Ans: Wired service is called right after component is created ie after constructor and is again called when parameter that you are passing is made available.

8. What are lifecycle hooks in LWC?

Ans: A lifecycle hook is a callback method triggered at a specific phase of a component instance’s lifecycle.

There are following hooks supported in LWC :

Constructor : Called when the component is created.

Connectedcallback : Called when the element is inserted into a document. This hook flows from parent to child.

RenderedCallback : Called after every render of the component. This lifecycle hook is specific to Lightning Web Components, it isn’t from the HTML custom elements specification. This hook flows from child to parent. Ie its not part of HTMLElement rather defined in LightningElement.

Disconnectedcallback : Called when the element is removed from a document. This hook flows from parent to child.

Errorcallback: Called when a descendant component throws an error. The error argument is a JavaScript native error object, and the stack argument is a string. This lifecycle hook is specific to Lightning Web Components, it isn’t from the HTML custom elements specification.

9. Is wire method called multiple times during lifecycle of component ? (True / False)

Ans: True

10. What is the difference in below two codes , will they both compile ? Give same results ?

Code 1 : 
@wire(getBoats)
getBoats({data,error}){
	if(data)
		console.log(‘print here’);
	Else if(error)
		console.log(‘print in else’);
 }
@wire(getBoats,{})
getBoats({error,data}){
	if(data)
		console.log(‘print here’);
	Else if(error)
		console.log(‘print in else’);
}

Ans: Both will compile they are same.

11. Is it mandatory to use data, error only in wired method, can I use some other variable like below : Scenario based interview question with answers

@wire(getBoats)
	getBoats({myData,myError}){
		if(mydata)
			console.log(‘i am in data’);
		else if(myError)
			console.log(‘I am in error’);
}
Will the code deploy successfully or I will receive an error ?

Ans: We cant use any other variable name other than data, error they are hardcoded in wire service. Code will successfully deploy but wire service wont be able to fetch any data.

12. What is the difference between event.StopPropogation() and Event.preventDefault()?

Ans: stopPropagation prevents further propagation of the current event in the capturing and bubbling phases. preventDefault prevents the default action the browser makes on that event.

13. If we add required attribute in lightning-input , will I get an error on leaving the field empty ?

Ans: No unless you also add logic in backend javascript file to actually throw an error using checkValidity and reportValidity.

14. Are quick actions supported for LWC components ?

Ans: Quick actions are supported by LWC in Summer 21 or later orgs. LWC quick actions are only supported on record pages.

15. How can i reference record ID of page in my component which is fired from quick action.

Ans: There are two types of quick actions in LWC :
Screen actions : Normal action which open a modal
Headless actions : Which dont have any html file rather just logic written in js ie no modal window will come up
In case of screen actions we will be able to get recordID by just defining recordID as public property in the component.
For headless action you have to define @api invoke method which is auto called and recordID will be set after this function is called.

16. What is a promise in async transactions? What are it different stages. [Latest Salesforce lightning interview questions and answers]

Ans:
Promise is object returned in async transaction which notifies you about completion or failure of transaction.
For example when you call apex imperatively it returns you a promise object on the basis of object returned execution either goes into (then) ie transaction was successful or (catch) which means transaction failed.

Stages of promises are :

Pending: Waiting for result.
Fulfilled: Promise results in success.
Rejected: Promise result in failure.

17. What is the difference between Promise and Promise.all?

Promise.All takes in multiple promises in it and returns a single promise object.
Promise.all is used when I want to make sure once all promises are resolved then only execute then block.

18. What are web components, Is LWC based on web components?

Ans: In simplest language , web components can be explained as it allows you to create and re-use custom components as html tags in a component with their functionality encapsulated from rest of your code.
Web components has 4 pillars which make it so amazing.
HTML Template : user defined templates which are rendered until called upon.
Custom Elements : With this we can embed as components merely as html tags in our template.
Shadow DOM : With this we can separate DOM of each custom element from each other to make sure nothing from any components leaks into each other.
HTML Imports : You can import other html documents in another html document for example we can import multiple templates into one component then use render function to display a template.
Yes LWC is based on web components
If you look at LWC architecture Salesforce only adds security , LDS and base components rest is based on web components and es 7.

19. Why do we extend LightningElement?

Ans: LightningElement is custom wrapper on HTMLElement which actually contains all the lifecycle hooks methods over which Salesforce did some customization.

20. When we create new component why does it say export default ComponentName ?

Ans: Because of export default component only we are able to embed one component into another.

21. How do I retrieve elements on the basis of ID?

Ans: We should never use “id” in lwc as id that you will define in LWC may get transformed into something entirely different on rendering, rather use data-id in your tags to reference them.

22. How to send data from Parent to Child in LWC?

Ans: For parent to child communication you just need to expose your function or attribute as @api then in your parent component you can use querySelector to actually query the child component access exposed attribute or method.

23. If we parent component A and there are two component B and C as child components. How can we communicate between B and C ?

Ans: We should fire up event from child component B to parent A then from A call attribute / function exposed (as @api) and pass data into C component.

24. What does composed = true does in an event ?

Ans: These type of events can bubble up inside dom and also able to cross shadow boundary.

26. When you fire an event, can i capture it in same template/ component ?

Ans: No

27. Is bubble : false and composed : true possible in an event ?

Ans: No

28. What is the difference between below :

a. Bubble : false and composed : false
b. Bubble : true and composed : true
c. Bubble : true and composed : false

29. What are callback functions in LWC ?

Ans: Callback functions are nothing but functions passed as parameter into other functions.

30. Are callback functions synchronous or asynchronous ?

Ans: Functions are neither async or sync in themselves rather depend on where are they being passed for example if a function in passed into reduce method is sync but if function is being passed into setTimeout function its async.

31. What is callback hell?

Ans: In most simple words callback hell occurs when there are many functions you want to call async and you end up puting them one side each another and as the code grows it becomes very difficult to read for example :

getData(function(x) { 
     getMoreData(x, function(y) { 
          getMoreData(y, function(z) { ... });
      });
});

32. What are decorators in LWC (Lightning web components) in Salesforce? Latest interview question.

Ans: The Lightning Web Components programming model has three decorators that add functionality to a property or function. There are 3 decorators for LWC
@track , @wire, @api

33. When do I use @track on a property ? Do I still need it considering all properties are by default reactive now?

Ans: After Spring 20 all the properties are made by default reactive ie we dont need @track for primitive properties. We still need it for array or object type properties

34. Can I use multiple decorators on one property ?

Ans: No we cant use multiple decorators on same property.

35. Can I deploy component with empty css file ?

Ans: No we cant do that

36. What is difference between var and let in JS ?

Ans: In simple words difference is var is function scoped while let is block scoped
Var allows you to redeclare same variable while let will throw an error
Var variables are hoisted that is you can access them even before they are declared in code its just they will return undefined value while with let it will throw an error.

37. Is there any difference in how we add LWC component inside another LWC component and inside AURA component ?

Ans: Difference is how they are added in the component.
LWC follows kebab case ie if you are adding any LWC component inside another component you will have to add in kebab case form while in AURA it will be added without kebab case for example :
We have component with name “childLWCComponent”
In LWC it will be added as <c-child-l-w-c-component/>
In Aura it will be added as <c:childLWCComponent/>

38. What is LMS ?

Ans: LMS is defined as the standard publish-subscribe library that enables communication with DOM across the components be it Visualforce Pages, Aura components, and Lightning Web Components (LWC) all can use it to publish message and listen to messages published by others.

40. Do we have application events in LWC?

Ans: We don’t have application event as such in LWC like Aura rather we have LMS in LWC to communicate between components which are not part of same hierarchy.

41. How can we navigate user from LWC component to record detail page?

Ans: Can be done using NavigationMixin service

42. Do we have force:createRecord equivalent in LWC?

Ans: Using navigation mixin only you can also create new record where you define object , action as new and pass any default values you want to set.

43. What is render() , is it part of lifecycle hook? Why do we use it ?

Ans: Render is not part of lifecycle hook its a protected function, we only use it if we have imported multiple templates in our component and we want to render particular template on meeting certain criteria.

44. Can I get current user ID in LWC without apex?

Ans: Yes we can get current user ID without apex by simply importing
import Id from ‘@salesforce/user/Id’

45. What is difference between ‘==’ and ‘===’ ?

Ans: Both are used to compare two variables but == doesnt take data type into consideration and does type coercion ie interpreter tries to automatically convert data types to match the values while in === case if data type is not same it will always return false.
For example :
2==”2” will return True (Type coercion happens)
2===”2” will return False ( No Type coercion)

46. What is String interpolation ? [important interview questions and Salesforce Lightning]

Ans: It means simply when string literal is evaluated all the placeholders added into it are calculated at run time and replaced in string with values. Place holder can be anything a variable , expression even a function call. In javascript its performed using (backtick).

For example:

const greeting = 'Hello'; 
const who = 'World'; 

const message =${greeting}, ${who}!`; 
message; // => 'Hello, World!'

47. What are template literals? What is the use?

Ans: In javascript string interpolation is performed using template literals.
Template literals are created using (`) backtick character apart from string interpolation they also are used for adding multi-line strings without having to use “\n”

For example:

console.log('string text line 1\n' +
'string text line 2');
console.log(`string text line 1
string text line 2`);
//Both will result in same output

48. Can i call function annotated with @AuraEnabled(cacheable= true) imperatively ?

Ans: Yes

49. Can we do DML in method annotated with @AuraEnabled(cacheable= true)?

Ans: No we cant do DML inside any method annotated with cacheable = true , you will receive an error as DMLLimit Exception.

50. How to refresh cache when calling method imperatively ?

Ans: We have to use getRecordNotifyChange(RecordIds) which refreshes the LDS cache providing you the latest data this will work only if cacheable = true was there.
Otherwise we will have to call the function again from our js to get the latest data.

51. When do we face error of “Cant assign to Read only property” in LWC?

Ans: This error usually occurs when you are trying to make changes to a property which is marked as @api , ideally you should clone the value then make the changes to it.

52. How can I evaluate expression in situation like <template if:true = {someVariable % 7==0}

Ans: We cant add expressions directly in html file rather what we can do is create getter which will evaluate value for us which we can use in html like below :

get isMod7() { return this.index % 7 == 0; }
<template if:true ={isMod7}

53. Why do we put constants outside of class in LWC?

Ans: We cant put constants inside a class or function in javascript its illegal for example below piece of code will throw you an error.

export default class someClass extends LightningElement { 
	const someVar = ‘someValue’ ; 	
}

54. How to query all lightning-input , combobox, radio buttons using one querySelector or do I have to use multiple ?

Ans: We can query all of them using one query selector only no need to write multiple for each tag. We can pass all tags (,) separated to query all.

const allValid = [...this.template.querySelectorAll('lightning-input,lightning-combobox,lightning-radio-group')];

If you are wondering why are we using (…) spread operator before querySelectorAll its because querySelector returns you the nodelist and using spread operator we convert it to array of items otherwise we wouldnt be able to use array functions like map or reduce.

55. What is reduce method in JS?

Reduce method calls the reducer function (callback function) for each item of the array to reduce the whole array into single value.

Remember it doesnt change the actual array

array.reduce((accumulator , currentVal , currentIndex , array)=>{},0)

As the name suggests accumulator collects all the value
currentVal – denotes the current val of array
currentIndex – denotes the index of current val of array [optional]
Array – array object being passed. [optional]

Remember : If default value is passed accumulator is set to default value and index starts with 0 , if no default value is passes accumulator is assigned 0th index value and currentIndex starts from 1.

Readmore: Arrays in Salesforce Apex

56. What would be the output of : 1+3+”4” ?

//A 44 because type coercion will take place.
statu
	get statusVal(){
	return statusVal ;
}
	set statusVal(value){
	this.statusVal = value;
}

renderedCallback(){	
this.statusVal = ‘ABC’ 
}

Ans: Yes you will receive an error “Maximum depth exceeded” as in set function you are again setting statusVal itself which means it will keep on setting itself (infinitely).

Interview Questions For Experienced

57. What is the difference between `connectedCallback` and `renderedCallback` in LWC?

Answer: In Lightning Web Components (LWC), lifecycle hooks are special methods that allow developers to execute code at specific points during a component’s lifecycle. Two of the most commonly used lifecycle hooks are connectedCallback and renderedCallback . These hooks provide opportunities to run code when a component is inserted into the DOM and after it has been rendered, respectively. Understanding the differences between these hooks is crucial for effectively managing component initialization and updates.

connectedCallback is called when the element is inserted into the DOM. renderedCallback is called after every render of the component.

Code Example:

import { LightningElement } from 'lwc';

export default class LifecycleDemo extends LightningElement {
    connectedCallback() {
        console.log('Component inserted into the DOM');
    }

    renderedCallback() {
        console.log('Component rendered');
    }
}

58. How can you pass data between LWC components?

Answer:

In Lightning Web Components (LWC), passing data between components is a common requirement for creating interactive and dynamic applications. There are several ways to achieve this, depending on the relationship between the components. The most common methods include using public properties, custom events, and the Lightning Message Service (LMS). Understanding these methods is crucial for building robust and maintainable applications.

Code Explanation

1. Using Public Properties Public properties are used to pass data from a parent component to a child component. The child component exposes a public property using the @api decorator, and the parent component binds data to this property.

Code Example:

// Child Component (childComponent.js)
import { LightningElement, api } from 'lwc';

export default class ChildComponent extends LightningElement {
    @api message;
}

// Child Component Template (childComponent.html)
<template>
    <p>{message}</p>
</template>

// Parent Component (parentComponent.js)
import { LightningElement } from 'lwc';

export default class ParentComponent extends LightningElement {
    parentMessage = 'Hello from Parent';
}

// Parent Component Template (parentComponent.html)
<template>
    <c-child-component message={parentMessage}></c-child-component>
</template>

In this example, the parent component ( parentComponent ) passes the parentMessage property to the child component ( childComponent ). The child component uses the @api decorator to declare the message property as public, allowing it to receive the value from the parent.

2. Using Custom Events Custom events are used to pass data from a child component to a parent component. The child component dispatches an event with the data, and the parent component listens for this event and handles the data.

Code Example:

// Child Component (childComponent.js)
import { LightningElement } from 'lwc';

export default class ChildComponent extends LightningElement {
    handleClick() {
        const event = new CustomEvent('myevent', { detail: 'Hello from Child' });
        this.dispatchEvent(event);
    }
}

// Child Component Template (childComponent.html)
<template>
    <button onclick={handleClick}>Click Me</button>
</template>

// Parent Component (parentComponent.js)
import { LightningElement } from 'lwc';

export default class ParentComponent extends LightningElement {
    handleEvent(event) {
        console.log(event.detail);
    }
}

// Parent Component Template (parentComponent.html)
<template>
    <c-child-component onmyevent={handleEvent}></c-child-component>
</template>

Explanation: In this example, the child component ( childComponent ) dispatches a custom event ( myevent ) with a message in the detail property when a button is clicked. The parent component ( parentComponent ) listens for this event and handles the data in the handleEvent method.

3. Using Lightning Message Service (LMS) The Lightning Message Service (LMS) is used to communicate between components that do not have a direct parent-child relationship, even if they are in different parts of the application.

Code Example:

// Message Channel (messageChannel.js-meta.xml)
<?xml version="1.0" encoding="UTF-8"?>
<MessageChannel xmlns="http://soap.sforce.com/2006/04/metadata">
    <masterLabel>SampleMessageChannel</masterLabel>
    <isExposed>true</isExposed>
</MessageChannel>

// Publisher Component (publisherComponent.js)
import { LightningElement } from 'lwc';
import { createMessageContext, releaseMessageContext, publish } from 'lightning/messageService';
import SAMPLEMC from '@salesforce/messageChannel/SampleMessageChannel__c';

export default class PublisherComponent extends LightningElement {
    context = createMessageContext();

    handleClick() {
        const message = { message: 'Hello from Publisher' };
        publish(this.context, SAMPLEMC, message);
    }

    disconnectedCallback() {
        releaseMessageContext(this.context);
    }
}

// Publisher Component Template (publisherComponent.html)
<template>
    <button onclick={handleClick}>Publish Message</button>
</template>

// Subscriber Component (subscriberComponent.js)
import { LightningElement, wire } from 'lwc';
import { createMessageContext, releaseMessageContext, subscribe, unsubscribe } from 'lightning/messageService';
import SAMPLEMC from '@salesforce/messageChannel/SampleMessageChannel__c';

export default class SubscriberComponent extends LightningElement {
    subscription = null;

    context = createMessageContext();

    @wire(MessageContext)
    messageContext;

    connectedCallback() {
        this.subscription = subscribe(
            this.messageContext,
            SAMPLEMC,
            (message) => this.handleMessage(message)
        );
    }

    disconnectedCallback() {
        unsubscribe(this.subscription);
        releaseMessageContext(this.context);
    }

    handleMessage(message) {
        console.log('Received message:', message);
    }
}

// Subscriber Component Template (subscriberComponent.html)
<template>
    <p>Check console for received messages</p>
</template>

59. How can you communicate from child to parent component in LWC?

Answer:

In Lightning Web Components (LWC), communication between components is essential for creating dynamic and interactive applications. While passing data from parent to child components is straightforward using public properties, communicating from a child component to a parent component requires a different approach. This is typically achieved using custom events. Custom events allow child components to send messages or data to their parent components, facilitating a two-way interaction within the component hierarchy.

Code Explanation

Custom Events Custom events in LWC are used to enable child-to-parent communication. The child component dispatches an event with a specified name and optional data payload, and the parent component listens for this event and handles the data accordingly. This method allows for flexible and efficient communication between components that maintains the decoupled nature of web components.

Code Example:

// Child Component (childComponent.js)
import { LightningElement } from 'lwc';

export default class ChildComponent extends LightningElement {
    handleClick() {
        const event = new CustomEvent('myevent', { detail: 'Hello from Child' });
        this.dispatchEvent(event);
    }
}

// Child Component Template (childComponent.html)
<template>
    <button onclick={handleClick}>Click Me</button>
</template>

// Parent Component (parentComponent.js)
import { LightningElement } from 'lwc';

export default class ParentComponent extends LightningElement {
    handleEvent(event) {
        console.log(event.detail);
    }
}

// Parent Component Template (parentComponent.html)
<template>
    <c-child-component onmyevent={handleEvent}></c-child-component>
</template>

Explanation:

Child Component:
- handleClick Method: The child component defines a method handleClick that dispatches a custom event named myevent with a detail payload containing the message ‘Hello from Child’.
- Event Dispatching: The event is created using the CustomEvent constructor, which takes the event name and an options object where the detail property carries the data.
- Template: The child component’s template includes a button that triggers the handleClick method when clicked.
Parent Component:
- Event Listener: The parent component template listens for the myevent event using the onmyevent attribute and maps it to the handleEvent method.
- handleEvent Method: This method logs the received event detail to the console, demonstrating how the parent component can react to events dispatched by the child component.

60. How do you handle asynchronous operations in LWC?

Answer:

Handling asynchronous operations in Lightning Web Components (LWC) is crucial for managing tasks such as fetching data from a server, processing user inputs, and performing background computations. Asynchronous operations ensure that the user interface remains responsive while waiting for these tasks to complete. In LWC, asynchronous code can be managed using JavaScript’s Promises and the async / await syntax, which provide a clean and efficient way to handle operations that take time to complete.

Code Explanation

Using Promises and async / await JavaScript Promises represent the eventual completion (or failure) of an asynchronous operation and its resulting value. The async / await syntax is a modern way to work with Promises, allowing developers to write asynchronous code that appears synchronous, making it easier to read and maintain.

Key Points:

Promises: Represent asynchronous operations and can be handled using .then() and .catch() methods.
async/await: Syntactic sugar built on top of Promises, allowing for a more readable and concise code structure.

Example Use Case: In the provided code example, an asynchronous operation is performed in the connectedCallback method using the async / await syntax. The fetchData method, presumably an Apex method or any other asynchronous function, is awaited, ensuring that the data is fetched before further execution.

Code Snippet:

import { LightningElement, track } from 'lwc';
import fetchData from '@salesforce/apex/DataController.fetchData';

export default class AsyncDemo extends LightningElement {
    @track data;

    async connectedCallback() {
        this.data = await fetchData();
    }
}

Explanation:

connectedCallback Method: The connectedCallback lifecycle hook is used here to fetch data as soon as the component is inserted into the DOM. This ensures the initial data is available when the component is rendered.
async Keyword: Declares the connectedCallback function as asynchronous, allowing the use of await within it.
await Keyword: Pauses the execution of the connectedCallback function until the fetchData Promise resolves. This ensures that this.data is assigned the fetched data before the method completes.

By using async / await , the code becomes more readable and easier to maintain compared to traditional Promise chaining with .then() and .catch() . This approach ensures that asynchronous operations are handled efficiently, keeping the user interface responsive and enhancing the overall user experience.

61. How can you conditionally render elements in LWC?

Answer:

In Lightning Web Components (LWC), conditionally rendering elements allows developers to control the visibility of parts of the component’s template based on the component’s state. This is essential for creating dynamic and responsive user interfaces. LWC provides template directives like if:true and if:false to conditionally display elements based on boolean expressions. These directives enable developers to show or hide elements without having to manipulate the DOM directly, leading to cleaner and more maintainable code.

Code Explanation

Using Template Directives if:true and if:false The if:true and if:false directives in LWC are used to conditionally render parts of the template based on the value of a boolean property in the component’s JavaScript class. When the condition evaluates to true, the element is rendered; otherwise, it is not included in the DOM.

Key Points:

if:true Directive: Renders the element if the condition is true.
if:false Directive: Renders the element if the condition is false.
Reactive Properties: The condition is typically a reactive property, ensuring that the template updates automatically when the property’s value changes.

Example Use Case: In the provided code example, the component uses the if:true directive to render an element only when a boolean property ( isVisible ) is true. This allows the developer to control the visibility of elements based on the component’s state.

<template if:true={isVisible}>
    <p>This is visible</p>
</template>
<template if:false={isVisible}>
    <p>This is hidden</p>
</template>

// JS
import { LightningElement, track } from 'lwc';

export default class ConditionalRender extends LightningElement {
    @track isVisible = true;
}

Explanation:

if:true and if:false Directives: The template uses these directives to conditionally render paragraphs based on the value of the isVisible property.
Reactive Property: The isVisible property, decorated with @track , ensures that any changes to its value automatically update the DOM.
Conditional Rendering: When isVisible is true, the first paragraph (“This is visible”) is rendered. When isVisible is false, the second paragraph (“This is hidden”) is rendered.

Enroll in our for a career-building experience with certification preparation and real-time projects. Learn from faculty with over 15 years of industry experience, ensuring you gain the skills needed to excel.

Check out these topand answers for extensive knowledge and informative details about Salesforce Admin, Developer, Integration, and LWC modules.

Blog Archive

Wednesday 25 September 2024

Salesforce LWC Quetions

Interview Questions:

1. Can we call the @AuraEnabled function in the apex class using wire ?

2. What do you mean by cacheable = true annotations ?

3. Will the below code deploy? (Assuming all variables and apex class function exists).

4. Why do we use $ when passing property in wire function, what does it mean? [Latest Salesforce lightning interview questions and answers]

5. If I want to refresh the wired data in the above function, can I call refreshApex(this.someVar) ?

6. Can we call a wire function inside a javascript function like below :

7. When is the wire method/property called in the lifecycle of a component ?

8. What are lifecycle hooks in LWC?

9. Is wire method called multiple times during lifecycle of component ? (True / False)

10. What is the difference in below two codes , will they both compile ? Give same results ?

11. Is it mandatory to use data, error only in wired method, can I use some other variable like below : Scenario based interview question with answers

12. What is the difference between event.StopPropogation() and Event.preventDefault()?

14. Are quick actions supported for LWC components ?

17. What is the difference between Promise and Promise.all?

20. When we create new component why does it say export default ComponentName ?

21. How do I retrieve elements on the basis of ID?

22. How to send data from Parent to Child in LWC?

23. If we parent component A and there are two component B and C as child components. How can we communicate between B and C ?

24. What does composed = true does in an event ?

26. When you fire an event, can i capture it in same template/ component ?

27. Is bubble : false and composed : true possible in an event ?

28. What is the difference between below :

29. What are callback functions in LWC ?

30. Are callback functions synchronous or asynchronous ?

32. What are decorators in LWC (Lightning web components) in Salesforce? Latest interview question.

33. When do I use @track on a property ? Do I still need it considering all properties are by default reactive now?

34. Can I use multiple decorators on one property ?

35. Can I deploy component with empty css file ?

36. What is difference between var and let in JS ?

37. Is there any difference in how we add LWC component inside another LWC component and inside AURA component ?

38. What is LMS ?

40. Do we have application events in LWC?

41. How can we navigate user from LWC component to record detail page?

42. Do we have force:createRecord equivalent in LWC?

43. What is render() , is it part of lifecycle hook? Why do we use it ?

44. Can I get current user ID in LWC without apex?

45. What is difference between ‘==’ and ‘===’ ?

46. What is String interpolation ? [important interview questions and Salesforce Lightning]

47. What are template literals? What is the use?

48. Can i call function annotated with @AuraEnabled(cacheable= true) imperatively ?

49. Can we do DML in method annotated with @AuraEnabled(cacheable= true)?

50. How to refresh cache when calling method imperatively ?

51. When do we face error of “Cant assign to Read only property” in LWC?

52. How can I evaluate expression in situation like <template if:true = {someVariable % 7==0}

53. Why do we put constants outside of class in LWC?

54. How to query all lightning-input , combobox, radio buttons using one querySelector or do I have to use multiple ?

55. What is reduce method in JS?

56. What would be the output of : 1+3+”4” ?

Interview Questions For Experienced

57. What is the difference between connectedCallback and renderedCallback in LWC?

58. How can you pass data between LWC components?

Code Explanation

59. How can you communicate from child to parent component in LWC?

Code Explanation

60. How do you handle asynchronous operations in LWC?

Code Explanation

61. How can you conditionally render elements in LWC?

Code Explanation

No comments:

Post a Comment

57. What is the difference between `connectedCallback` and `renderedCallback` in LWC?