LWC Enhancements for Developers | Spring '23 Edition

There are plenty of new Lightning Web Components features to get excited about in the Spring ’23 release. Today I will share 4 essential features in Lightning Web Components that will ease our job as Salesforce developers.

1. Query DOM elements with refs

Now you can use refs to access elements in shadow DOM and light DOM. Refs locate DOM elements without a selector and only query elements contained in a specified template. Previously, you could only use querySelector() to locate specific DOM elements.

Before:

<template>
   <div>My Div</div>
</template>

To query DOM elements in JavaScript, we use the this.template object. If we have multiple div elements in the markup, this method requires a little more code.

renderedCallback() {
   let myDiv = this.template.querySelector('div');
}

After:

First, add the lwc:ref directive to your element and assign it a value. To call that reference, use this.refs. In this example, the <div> element has the directive lwc:ref="myDiv", which this.refs references to access the <div> at runtime.

<template>
   <div lwc:ref="myDiv">My Div</div>
</template>

//Javascript
renderedCallback() {
   let myDiv = this.refs.myDiv1;
}

2. Use the Improved Conditional Directives

The conditional directives lwc: if, lwc:elseif, and lwc:else replace the legacy if:true and if:false directives. Before this release, you can set conditional rendering in your LWC templates by setting the if:true and if:false directives. 

The new conditional directives are simplified, improving your component’s performance while requiring you to write less code. The same example above can now be rewritten in the following way.

<!-- conditionalDirective.html -->
<template>
    <template lwc:if={expression1}>
        Statement 1
    </template>
    <template lwc:elseif={expression2}>
        Statement 2
    </template>
    <template lwc:else>
        Statement 3
    </template>
</template>

3. Synchronize component data without a page refresh using the RefreshView API (Beta)

Whether user-driven or app-invoked, the ability to synchronize data without reloading an entire page is a key user experience requirement. The new lightning/refresh module and RefreshView API provide a standard way to refresh component data in LWC and Aura.

The RefreshView API refreshes the data for a specific hierarchy of components known as a view without reloading the entire page.

RefreshView API can refresh data for Salesforce platform containers as well as custom components.

4. View debug information for your wired properties

Access debug information for wired properties and methods on a component via custom formatters in Chrome DevTools. Previously, to debug data received with a wired property, we had to use a wired function to return your data and inspect the deconstructed data and error properties. This new feature does not require any rewriting of your wired properties, taking advantage of your Chrome DevTools.

To start debugging your wire adapter:

1. Enable debug mode in your org

2. Open Chrome DevTools, and then enable custom formatters.

3. Find your code in the Sources panel.

Next, inspect your component using this or inspect the rendered custom element. To inspect the rendered custom element, click the <c-apex-wire-method-to-property> element in the Elements panel of Chrome DevTools.

After you click the element, open the Console panel and enter $0 to return the debug information.

This was a quick summary of the top LWC features for spring 23. For a complete release notes check the link in reference section.

Now that you know the great new features of Lightning Web Components, what is your favorite one in this release? Let me know in the comments section.

Reference

Salesforce Spring ’23 Release Notes

I hope you enjoyed the learning. Please write me back the suggestions, comments or any issues. Let's meet again in our next blog for more fun and learning.

THANK YOU.