Lightning Web Components FAQ

Lightning Web Components FAQ

Learn the basics of Lightning Web Components(LWC). I am sharing the most frequently asked questions about Lightning Web Components. If you have experience with Aura or Visulaforce Pages these questions will definitely help you to clear your doubts and assumptions about the LWC framework. So let's get started!

What is Lightning Web Components?

It is the new component framework based on modern Web Components with the SLDS design system. Web Components are new browser features and they are directly supported by browsers without the need for any library. LWC framework is based on the ES6+ Javascript and HTML.

How They are different from Aura components?

1. Aura components are proprietarily developed by Salesforce and run on top of the Aura framework which is not directly supported by browsers, so it can run only on the Salesforce platform while LWC is open source and can run on any browser without the need to additional libraries.
2. LWC has better performance that Aura Components.
3. Easy to learn, faster learning curve.
4. LWC loads faster that Aura components, as very few resources need to be loaded additionally.
5. You can have service components in LWC without having any UI.
6. LWC has the ability to use multiple apex controllers and JS controllers.
7. You get better security and testing tools like JEST to automate the testing.
8. Interoperable with Aura Components.
9. In LWC you can easily reuse/share the components, scripts, and stylesheets among the components easily.
10. Also, we get promises, classes, decorators with LWC.
11. You can easily extend outbox components functionality in LWC.
12. LWC is open-source and you can use it on any platform.

What is @track in Lightning web components?

With @track decorator, you can create private reactive properties. which are only accessible to the owner component. Please note that after spring 2020, @track is deprecated and no longer needed to create private reactive properties.

What is @api?

This decorator is used to define a public property of the component, which can be accessed or set by the parent component. We use it to pass data from the parent component or to expose the method to the parent component.

What is @wire?

Wire decorator is used to importing the wire service methods, like wired apex, standard salesforce APIs like "createRecord", "getRecord". It can be linked to property or function. All the data received through wire adapters are cached and immutable. The wired methods are called automatically whenever the parameter's values/references are changed or the component is loaded, we don't need to explicitly call them. Ok, finally keep these things always in mind.

• You need to use "cacheable=true" to be able to call apex using the wired method.
• Call refreshApex method to get the data from the database instead of cache (cached is also updated).

What is the imperative method?

Imperative, as the name suggests always call to the database by skipping cache, unlike wired methods. You don't need to use the "cacheable=true" in order to call the apex method. The imperative method does not get called automatically, you need to call them implicitly every time you need it.

How to use formula expressions in the Lightning Web Components HTML file?

No, right now you can't use formula expressions in web components HTML file. Instead of that calculate the properties in the JS file itself, and refer them on HTML.

How to override the CSS of standard Lightning web components?

You need to use static resources to override the CSS of standard LWCs. Just put the CSS into a static resource and import it in your custom component.

Can we override the standard actions, New, Edit, with LWCs?

Right now, action override is not supported by Lightning web components, however, you can wrap the Lwc in an aura component and use that aura component to override the action.

Can we use the external Javascript library in LWC?

Yes, we can use external libraries until they can be loaded into static resources. You can not use CDN links in LWCs directly.

Resources

LWC Documentations

Aura vs LWC

Wired Apex

Image by ijmaki from Pixabay