Top 3 Salesforce LWC Spring 23 Features for Developers

Some of the Salesforce instances will start getting Spring 23 from January 13 until February 11, if you want to know which day is planned for your instance, check on this link, select your instance name and hit Maintenance tab.
Today I will share 3 important features in Lightning Web Components that will ease our job as a Salesforce Professional.

1. Query DOM Elements with Refs

I added this feature as the first in the list, as this feature is similar from what we have in React. With this, we can now access elements in the shadow and light DOM without the need to use this.template.querySelector() or this.template.querySelectorAll().
Before:

<template>
   <div>Task 1</div>
   <div>Task 2</div>
</template>

On JavaScript, we use the this.template object to query DOM elements. This method requires a bit more code if we have multiple div elements in the markup for instance.

renderedCallback() {
   let task1 = this.template.querySelector('div'); //single element
   let tasks = this.template.querySelectorAll('div'); //array 
}

After:
we add the lwc:ref attribute to specific elements in which we want to access via JavaScript.

<template>
   <div lwc:ref="myDiv1">Task 1</div>
   <div lwc:ref="myDiv2">Task 2</div>
</template>

We can see right away the benefit of using refs that enables us to target specific elements in the DOM in a cleaner manner.

renderedCallback() {
   let task1 = this.refs.myDiv1;
   let task2 = this.refs.myDiv2;
}

2. Synchronize Component Data Without a Page Refresh Using RefreshView API (Beta)

Finally this feature is coming to LWC and AURA with the new module lightning/refresh and RefreshView API. This feature will allow us to control refresh scope, update the data for specific hierarchy of components (views) without reloading the entire component. Today AURA only supports the legacy force:refreshView that refreshes the whole component, which doesn't meet the requirements of modern web development.

3. View Debug Information for Your Wired Properties

Say bye-bye to console.log. Before when debugging for data received with a wired property we had to use a wired function in order to console log to inspect the deconstructed data and error properties. With this release we can now visualize the returned wired data directly on Chrome DevTools by enabling custom formatters and inspect the rendered custom element <c-apex-wire-method-to-property> in the Elements panel.

No alt text provided for this image
With the element selected, click on Console panel and type $0, this will return the debug information right away in the console.

No alt text provided for this image
This was a quick overview of what I consider to be the top 3 LWC features for spring 23. For a complete release notes check this link.