Introduction

Being able to synchronize data without reloading the entire page is a key user experience requirement.

In the Spring '23 release, the new lightning/refresh module and the RefreshView API provide a standard way to refresh component data in both LWC and Aura.

• The RefreshView API offers detailed control over the refresh scope, which allows developers to create refined user experiences while maintaining backward compatibility.
• RefreshView API supports refreshes that are triggered by end users or web components.
• Lightning Data Service supports RefreshView API.

<aside> ☝ Lightning Web Security must be enabled in orgs where components use the RefreshView API. Lightning Locker doesn’t support RefreshView API.

</aside>

How to use it

To use RefreshView API, import the lightning/refresh module.

Signal a refresh

Let’s imagine that you have developed a custom component to create a new contact, and in the same Tab, you have a standard LWC to show a list of all the contacts.

When you create a new contact with your custom LWC, unfortunately the standard LWC List View will not show the new contact, you must refresh the whole page using your browser reload button.

• To avoid this and start a view refresh, fire the RefreshEvent event, defined in lightning/refresh.
• This event makes a request to a container to begin the refresh process. This event can be fired from any component.

So, when a LWC calls to this.dispatchEvent(new RefreshEvent()) function, all standard components that are aware (either because their already has this standard behavior or because they registered using the technical term) of this event, will refresh automatically.

import { LightningElement } from 'lwc';
import { RefreshEvent } from 'lightning/refresh';

export default class createCustomContact extends LightningElement {
   
   createNewAccount() {
			...
      **this.dispatchEvent(new RefreshEvent());
			....**
   }
}

Register to receive RefreshEvent

Now, let’s imagine that your custom LWC is the one that needs to be aware of a refresh signal sent by other LWC components.

To be notified of a signal refresh event, a component registers a handler method: