Force Refresh View in LWC

Refresh View was must needed feature missing in Lightning Web Component. When a change is invoked from custom LWC, user had to refresh the page manually by reloading it. Good news is refreshview module is now available to use directly in LWC. The new lightning/refresh module and RefreshView API provide a standard way to refresh component data in Lightning web components (LWC) and Aura components.

force refresh view use case in Lightning Web Component

Business asked you to add a custom file uploader on account record page. They also expect the files uploaded should be available in notes and attachment related list without refreshing the page by reloading.

Code – force refresh view for file uploader

Let’s create a Lightning Web Component with name fileUploader. We will use standard base component for file upload by passing the current record id in it.


        label="Attach receipt"


RefreshEvent signals other standard component to refresh when fired. We are firing it after file upload is done.

import { LightningElement, api } from 'lwc';
import { RefreshEvent } from 'lightning/refresh';
export default class FileUploader extends LightningElement {
    @api recordId;

    get acceptedFormats() {
        return ['.pdf', '.png'];

    handleUploadFinished(event) {
        // refresh the standard related list
        this.dispatchEvent(new RefreshEvent());


We can place the component on record page based on targets added in xml. We can modify it based on business requirement.

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="">

Demo – Refresh View API in LWC

Do you need help?

Stuck while working on this requirement? Do you want to get review of your solution? Now, you can book dedicated 1:1 with me on Lightning Web Component completely free.


Schedule a 1:1 Meeting with me

Also check out


  1. Thank you so much for spending your time to create these helpful documentation with simple real time examples. it helps alot:)

  2. the ability to force-refresh a view in Lightning Web Components (LWC) brings a new level of flexibility and responsiveness to the development process. By allowing developers to dynamically update the user interface, LWC empowers them to deliver seamless and engaging experiences to users.

Leave a Reply