LWC Flashcards
What is lwc?
UI framework built using html, modern Javascript. Uses core web standards. runs natively on browser which in turn makes it light weight and perform faster(load, render faster and responsive)
Benefits of lwc?
- up to date with current web standards
- runs natively on browser hence faster(no compilations or abstractions)
- transferable skill
- coexist with aura
Files in LWC/folder structure in LWC?
MyComponent.html - frontend
MyComponent.js - client side backend
MyComponent.js-meta.xml - configuration
MyComponent.css
What is lwc module?
lwc framework follows module structure. So lwc is a core module which is extended by every lwc component. It provides with lifecycle hooks, decorators, etc.
Named vs default exports
Named exports can be many in a single file and while importing their names need to match in both places. For that just write export in front of that function. It’s opposite happens in default exports.
LWC js file is a default export
xml file basic attributes?
apiVersion - salesforce api version
isExposed - is component exposed to lightning app builder or lightning experience builder
targets - target -
lightning_HomePage,
lightning_AppPage,
lightning_RecordPage,
lightning_ScreenFlow,
lightning_Tab
Can aura component have lwc? and vice versa
Yes. No
camel case vs kebab case
name of properties/folder/components - camel case, while including a component in the html - kebab case prefixed with namespace or default namespace(i.e.) c
myComponent, MyComponent, c-my-component
What are decorators?
They modify behavior of properties and functions.
@api, @track, @wire
field vs property
interchangeable but to define, field is wrt class and property is wrt the instance of that class
@api
- marks a property public
- public properties can be assigned value in
html markup by parent component - public properties are reactive (all
properties are reactive in newer releases)
What is reactive?
A change in value of property makes the component re render as it is observing it. With new release all properties are reactive
@track
make an element of array or property of object reactive
@wire
Provision of immutable data from salesforce to component. caches. To mutate that data copy of it needs to be made on which mutations happen
Conditional rendering?
- <template if:true={data}></template>
- <template if:false={data}></template>
List rendering?
- <template for:each={contacts} item=’contact’>
- <li key={contact.id} value={contact.name}></li>
- </template>
expression in lwc
<template>{propertyName}</template>
.js
@api propertyName
declared in js and used in html
in case of aura properties declared in html and assigned in js
Which annotation is used to expose an apex method to lwc?
@AuraEnabled(Cacheable=true)
When is cacheable=true mandatory?
When apex method called by wire adapter. The returned list is cached.
What is caching?
Storing data in browser cache so as to make less server calls.
Can cacheable=true used for imperative apex calls?
Yes but then the returned data becomes immutable
Types of calls in lwc?
wire and imperative
What are lifecycle hooks?
LWC provides methods which allows to hook code at different stages of lifecycle of lwc.
List lifecycle events and hooks
-component created - constructor() - parent to child
-inserted in DOM - connectedCallback() - parent to child
-rendered - render(), renderedCallback() - child to parent
-error occured - errorCallback() - parent to child
-removed from DOM - disconnectedCallback() - parent to child
best resource - https://www.sfdcstop.com/2023/08/lifecycle-hooks-in-lwc.html
