Lightning web components (LWC) interview questions

Hello Trailblazers! Today I will share the Lightning web components interview questions with you. This is the first post of the LWC interview question series.

See Part 2 of LWC Interview Questions

What is the Lightning Web Component framework?

The Lightning web component is the component-based framework built using SLDS (Salesforce Lightning Design System) and web components. 

Web Component is the suit used to create reusable custom elements in HTML. Lightning Web components are custom HTML elements created using HTML and modern JavaScript. 

Lightning Web Component framework has a rich set of out the box components and APIs to communicate with the Salesforce Database. 

Why Lightning Web Component is lightweight?

Because the Lightning Web Components framework is built on the code which natively runs in the browser, most of the code that you write in them is standard HTML and JavaScript. 

Unlike the Aura Component Framework, they don't need the additional resources to be loaded.

What are lifecycle hooks in the Lightning web component?

The Lightning web component lifecycle is managed by the framework, means the framework itself creates, renders, and unloads the component from the DOM.

There can be a need to run some code at a particular stage of the component lifecycle. So the framework provides the below lifecycle hooks to do that.

What is the difference between wired apex methods and imperative apex methods?

Wired Apex	Imperative Apex
Wired Apex methods get called automatically when the component is connected or every time the reactive properties are changed.	Imperative apex methods need to be called explicitly. If you need to call imperative apex when the component is loaded, call that in connectedCallback.
Data returned by wired apex methods are immutable.	Data returned by imperative apex methods is mutable.
You must use cacheable=true to be able to call apex methods. with a wire adapter.	The cacheable=true is optional for the imperative apex methods.
You can perform only read/query operations with wired methods and DML is not allowed as you can't perform DML inside the cached method.	You can perform read, write, update, delete operations with the imperative apex calls. Note: DML operations are not allowed if the apex method is annotated with cacheable=true.
You can @wire a property or a function.	The imperative apex methods are invoked as promises inside a function.
To get the fresh data from the database instead of cache, use refreshApex()

After Summer 19 release,  all the properties are reactive by default, then why do we need to use @track decorator?

After Summer 19 releases 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.

When do we use @api with a function or a property?

When we need to expose the property or function to the container (parent) component. Then we annotate them with @api. In simple words, to create a public property or function.

Note: If the public property value is set by a parent it is immutable. Mean you can change the reference but can't change the property itself.

When the @wire method gets called?

Wired Apex methods get called automatically when the component is connected or every time the reactive properties are changed.

What is shadow dom?

The elements of each Lightning web component are covered in the shadow tree. 

It is called a shadow tree because it’s hidden from the common that contains it. This is how the CSS and Events are protected from other components on the Page.

Shadow DOM is a web standard that encapsulates the elements of a component to keep styling and behavior consistent in any context. That is the reason we can't override the standard base component CSS from the custom component.

Since not all browsers support Shadow DOM, LWC uses a shadow DOM polyfill, a code that allows a feature to work in a web browser.

See Part 2 of LWC Interview Questions

Related Posts

Lightning Web Components FAQ