Salesforce LWC Probable Interview Questions
1. What are Lightning Web Components (LWC)?
We can build Lightning components using two programming models:
Lightning Web Components, and the original model, Aura Components. Lightning web components are custom HTML elements built using HTML and modern JavaScript.
Lightning web components and Aura components can coexist and interoperate on a page. To admins and end users, they both appear as Lightning components.
Lightning Web Components uses core Web Components standards and provides only what’s necessary to perform well in browsers supported by Salesforce. Because it’s built on code that runs natively in browsers, Lightning Web Components is lightweight and delivers exceptional performance. Most of the code we write is standard JavaScript and HTML.
Salesforce is committed to developing open web standards and is a member of the World Wide Web Consortium (W3C).Salesforce developers are contributing members of the Ecma International Technical Committee 39 (TC39), which is the committee that evolves JavaScript.
For details, please refer - https://developer.salesforce.com/docs/component-library/documentation/lwc
2. What is the file structure of Lightning Web Components?
To create a component, first we need to create a folder that bundles your component’s files.
The folder and its files must have the same name, which includes capitalization and underscores.
myComponent
├──myComponent.html
├──myComponent.js
├──myComponent.js-meta.xml
├──myComponent.css
└──myComponent.svg
For details, please refer - https://developer.salesforce.com/docs/component-library/documentation/en/lwc/create_components_folder
3. How to Render DOM Elements Conditionally?
To render HTML conditionally, we need to add the if:true|false directive to a nested <template> tag that encloses the conditional content.
The if:true|false={property} directive binds data to the template and removes and inserts DOM elements based on whether the data is a true or false value.
For details, please refer - https://developer.salesforce.com/docs/component-library/documentation/en/lwc/create_conditional
4. How can we iterate list/render lists in Lightning Web Component (LWC)?
To render a list of items, we need use for:each directive or the iterator directive to iterate over an array. Add the directive to a nested <template> tag that encloses the HTML elements we want to repeat.
The iterator directive has first and last properties which let us apply special behaviors to the first and last items in an array.
For details, please refer - https://developer.salesforce.com/docs/component-library/documentation/en/lwc/create_lists
5. How to Render Multiple Templates?
If we want to render a component with more than one look and feel, but not want to mix the HTML in one file. For example, one version of the component is plain, and another version displays an image and extra text. In this case, we can import multiple HTML templates and write the business logic that renders them conditionally. This pattern is like the code splitting used in some JavaScript frameworks.
Please note - Although it’s possible for a component to render multiple templates, salesforce recommend using an if:true|false directive to render nested templates conditionally instead.
For details, please refer - https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.create_render
6. What are the public properties in Lightning Web Components?
In order to expose a public property, we need to decorate a field with @api.
Public properties define the API for a component. Public properties used in a template are reactive.
If the value of a public property used in a template change, the component rerenders.
For details, please refer - https://developer.salesforce.com/docs/component-library/documentation/en/lwc/reactivity_public
7. What are the types of decorators in lightning web components?
Lightning Web Components programming model has three decorators that add functionality to a property or function (@api,@track,@wire). The ability to create decorators is part of ECMAScript, but the three decorators are unique to Lightning Web Components.
For details, please refer - https://developer.salesforce.com/docs/component-library/documentation/en/lwc/reference_decorators
8. How many files are created by default when we create a Lightning Web Component?
HTML file.
JavaScript file.
Configuration XML file.
9. How to pass data from child to parent in LWC?
We can communicate with a Custom Event that is –
this.dispatchEvent(new CustomEvent(EventName));
For details and example, please refer - https://trailhead.salesforce.com/en/content/learn/projects/communicate-between-lightning-web-components/communicate-from-child-to-parent
10. Can we use AURA and LWC simultaneously?
An interoperability layer enables Lightning web components and Aura components to work together in an app. We can write new Lightning web components and add them to apps that contain Aura components. Or, we can iteratively migrate on our schedule by replacing individual Aura components in our app with Lightning web components.
Lightning web components and Aura components can work together, but there are limitations.
Please note,
Aura components can contain Lightning web components. However, the opposite does not apply that is Lightning web components can not contain Aura components.
For details and example(s), please refer - https://developer.salesforce.com/docs/component-library/documentation/en/lwc/interop_intro
11. Lightning Web Components Performance Best Practices –
Please refer - https://developer.salesforce.com/blogs/2020/06/lightning-web-components-performance-best-practices.html
Resource(s) –
https://developer.salesforce.com/
https://trailhead.salesforce.com/
Comments
Post a Comment