Difference between querySelector and LWC : ref

LWC : ref

This is?an easier way to reference and access your LWC elements on the runtime.??

Recently Salesforce has introduced a new way to do that in its Spring '23 release that is?Template refs API. ?

We will see the performance efficiency of LWC:ref comparing with query selector , as the query selector works with one by one selection and LWC:ref directly referenced the object which improves the efficiency and performance of the program.

QuerySelector

querySelector is?used to select an element, Here element can be div, span, input or any tag inside lwc component. In querySelector we use classname to uniquely identify a particular element and if there are more than one element we use querySelectorAll and run a loop on it.?

Basic Difference between LWC : ref and querySelector :

querySelector

In the above image we can understand the process of querySelctor ,which goes to every function for calling Function 3 i.e. it will check through out the code for calling function 3.

Example for querySelector:

In this example we are learning how to use a querySelector , in child.js we have different functions and we are calling those inside the parent.js . It will go to every function for searching the getDetails function.

Child.HTML

<template
? ? <lightning-card title="Child Component" icon-name="standard:account">
? ? ? ? <div class="childcss1">
? ? ? ? ? ? <p>I'm a Child Component </p>
? ? ? ? </div>
? ? ? ? <p>{handleChild}</p>
? ? ? ? <lightning-input label="Name" type="Text" onchange={name}></lightning-input>
? ? ? ? <lightning-input label="Age" type="Number" onchange={age}></lightning-input>
? ? </lightning-card>
</template>>        

Child.js

import { LightningElement , api ?} from 'lwc'


export default class Child extends LightningElement 
{
? ? handleChild = new Date();


? ? @api name1;
? ? @api age1;



? ? @api refresh()
? ? {
? ? ? ? this.handleChild = new Date();
? ? }


? ? age(event){
? ? ? ? this.age1=event.target.value;


? ? }
? ? name(event){
? ? ? ? this.name1=event.target.value;
? ? }
? ?
? ? @api getDetails(){
? ? ? ? console.log('Nameee1----->>>>',this.name1);
? ? ? ? console.log('Age--->>>',this.age1)
? ? } ? ? ? 
}        

Parent.HTML

<template
? ? <lightning-card title="Parent" icon-name="standard:contact">
? ? ? ? <div class="slds-var-m-around_medium">
? ? ? ? ? ? <lightning-button label="Get Details" onclick={handleDetails}></lightning-button>
? ? ? ? ? ? <c-child></c-child>
? ? ? ? </div>
? ? </lightning-card>
</template>>        

Parent.js

import { LightningElement } from 'lwc'


export default class Parent extends LightningElement 
{
? ? handleDetails(){
? ? ? ? this.template.querySelector('c-child').getDetails();
? ? }
}        

Output of this code :

Example for LWC : ref -

So in this image we will going to understand what exactly lwc:ref does , similarly as in the example of querySelector there are 4 functions and we have to call function 3 , so lwc:ref directly call the function 3 beside going through out the code it will directly referenced to the called function.

Child.HTML

<template
? ? <lightning-card title="Child Component" icon-name="standard:account">
? ? ? ? <div class="childcss1">
? ? ? ? ? ? <p>I'm a Child Component </p>
? ? ? ? </div>
? ? ? ? <p>{handleChild}</p>
? ? ? ? <lightning-input label="Name" lwc:ref="NameRef"></lightning-input>
? ? ? ? <lightning-input label="Age" type="Number" lwc:ref="AgeRef"></lightning-input>
? ? ? ? <lightning-button label="Submit" class="slds-grid slds-var-m-top_medium" onclick={handleSave} variant="brand"></lightning-button>
? ? </lightning-card>
</template>>        

Child.js

import { LightningElement , api } from 'lwc';

export default class Child extends LightningElement
{
? ? handleChild = new Date();
? ? @api refresh()
? ? {
? ? ? ? this.handleChild = new Date();
? ? }

? ? @api handleSave()
? ? {
? ? ? ? const nameval = this.refs.NameRef.value
? ? ? ? const ageval = this.refs.AgeRef.value
? ? ? ? console.log('Name---->>',nameval)
? ?   ? console.log('Age---->>',ageval)

? ? }

}?        

Parent.HTML

<template>
? ? <lightning-card title="Parent" icon-name="standard:contact">
? ? ? ? <div class="slds-var-m-around_medium">
? ? ? ? ? ? <lightning-button label="ParentMe" onclick={handleParent}></lightning-button>
? ? ? ? ? ? <lightning-button label="Get Details" onclick={handleDetails}></lightning-button>
? ? ? ? ? ? <c-child lwc:ref="childcmp"></c-child>
? ? ? ? </div>
? ? </lightning-card>
</template>?        

Parent.js

import { LightningElement } from 'lwc';

export default class Parent extends LightningElement
{
? ? handleParent(){
? ? ? ? console.log('Handle Click --->>>');
? ? ? ? this.refs.childcmp.refresh(); ? ?
? ? }

? ? handleDetails(){
? ? ? ? this.refs.childcmp.handleSave();
? ? }
}?        

output of this code:

ISIMO LLC

#lwc?#salesforce?#lightningwebcomponents?#lightning?#trailhead?#trailblazercommunity?#trailblazers?#salesforcedeveloper?#salesforcecertified?

#salesforcedevelopment #lwc