Bluecloud

Bluecloud

LWC Interview Questions 2023

Top Salesforce Lightning Web Component (LWC) Interview Questions 2023. From my own experience as a Salesforce Developer. That is the list of lwc-related questions that you can receive when you are applying to the Salesforce Developer role in 2023. That list will help you become more confident in the salesforce interview. I will provide you a list with questions and answers.

LWC Decorators

What type of decorators do you know?

In LWC we have 3 decorators:

  • @api
  • @track
  • @wire

Why and where we use them?

@api should be used when we want to expose an variable or functions as public (accessible outside of the component).
@track is used to track changes inside the objects property. This decorator makes object reactive which means that fraemwork will watch for this variable changes and if the property changes it will rerender the view.

All variables are reactive by default in LWC, but you still need to use @track to track what is changes inside the object, for more info check - mutability

@wire is used to read a data from the Salesforce through the wired functions and adapters. It creates an immutable stream of data to the component.

How to use @wire

You can use it with buil-in wire services such as getRecord or getFieldValue or you can decorate your own function to make it wired.

With this approach apex method should also use decorator @AuraEnabled(cacheable=true)

General questions

In this section, we will explore a selection of general interview questions that require creativity. These questions offer multiple variants for response and it depends on the interviewer which answer is correct, but with these answers, I have successfully passed the interview so they all are valid I guees :)

What is the best way to show 50000 records on the single page?

The best way is to use a datatable with lazy load on the page or use pagination instead.

What console.log(this.someVar) will show you in output?

It will show Proxy object instead of the variable value because of the Locker Service. To show the real value we need to wrap this.someVar in JSON.stringify() call.

console.log(JSON.parse(JSON.stringify(this.someVar)));

There is a scratch of the page, how would you decomopose this page to the components?

Scratch of the component
Interviewer asked to describe it in details. The right answer would be:

  1. Create a component container that will hold left and right part of out page.
  2. Create a container for the left side bar and also create a component for signle data entry.
  3. Create a right side bar and add info fields.
  4. The component container will hold all the logic for data manipulations.
  5. Set up communitcation between components through events.

How to make LWC available for use in Lightning App Builder?

Set the correct targets in meta.xml file Example:

<targets>
    <target>lightning__AppPage</target>
    <target>lightning__RecordPage</target>
    <target>lightning__HomePage</target>
</targets>

What is Lightning Web Security (LWS)?

Lightning Web Security (LWS) represents a fresh client-side security framework designed for Lightning components. It introduces a reduced set of limitations, enhances functionality, and maintains robust sandboxing mechanisms to ensure namespace isolation. The outcome is a potent, adaptable, and user-friendly security framework tailored for your Lightning components. LWS is positioned to supplant Lightning Locker in the realm of Lightning component security.

Lightning Web Security and Lightning Locker currently offer equivalent levels of security. The key difference is that Lightning Web Security allows increased JavaScript functionality and faster code execution.

LWS can securely enable features that Lightning Locker prevents because the architecture allows a more fine-grained approach to blocking unsafe behaviors. For example, instead of preventing use of an API entirely, LWS is able to prevent a component from setting a property of the API.

List and explain the different lifecycle hooks in LWC.

A lifecycle hook refers to a callback method that gets invoked during a particular stage in the lifecycle of a component instance. List of the lifecycle hooks in LWC:

  1. constructor() - Called when the component is created. This hook flows from parent to child, which means that it fires in the parent first. You can’t access child elements because they don’t exist yet. Properties aren’t passed yet, either. Properties are assigned to the component after construction and before the connectedCallback() hook.
  2. connectedCallback() - Probably most used hook, we can use it to perform initialization tasks, such as fetch data, set up caches, or listen for events. Called when the element is inserted into a DOM. The connectedCallback() hook can fire more than one time. For example, if you remove an element and then insert it into another position, such as when you reorder a list, the hook fires several times. If you want code to run one time, write code to prevent it from running twice.
  3. renderedCallback() - This particular lifecycle hook is executed following each rendering of the component and is unique to Lightning Web Components; it is not part of the HTML custom elements specification. A component undergoes a rerendering process when a property’s value changes, and this property is employed either directly within a component template or indirectly within a property’s getter, which is then utilized in a template.
  4. render() - this ‘hook’ should return existing and valid html template.
  5. disconnectedCallback() - Called when the element is removed from a document. Use disconnectedCallback() to clean up work done in the connectedCallback(), like purging caches or removing event listeners.
  6. errorCallback(error, stack) - Called when a descendent 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.

Conclusion

In conclusion, preparing for a Salesforce Lightning Web Component (LWC) interview in 2023 requires a solid understanding of key concepts and practical knowledge. We’ve covered essential topics such as LWC decorators, general interview questions, and LWC lifecycle hooks to help you build confidence and excel in your interview.