lwc component does not refresh when navigating back to it from record page

Question

So, I have a lwc component, that is accessed via related list. When I enter the record page, and navigate to the lwc, everything works fine. Then, if I do something on that lwc, save and navigate back to the record page (via navigation mixin) and then, go back to the lwc, it loads the last thing I saw before saving, with the old values, and does not refresh it. Is there a way to force the lwc component to refresh everytime I navigate to it? I understand refreshing the whole page is not good for the user experience. Is there a formal way Salesforce provides?

EDIT: I forgot to mention, my LWC is wrapped around an url addressable aura component. I found this in the query parameters documentation:

"If your component uses the lightning:hasPageReference or lightning:isUrlAddressable interfaces, always implement a change handler. When the target of a navigation action maps to the same component, the routing container might simply update the pageReference attribute value instead of recreating the component. In this scenario, a change handler ensures that your component reacts correctly." does that have something to do with it?

Answer 1

Components that are loaded are cached when you use NavigationMixin. So, when you navigate to different page from custom component, the current state of you component is stored in cache and the next time you navigate back would render the stored instance. Also, connectedCallback would be called only the first time you navigate to that component.

To overcome this problem you can use some design pattern that would know when URL is changed (change handler in Aura).

In LWC, you can use CurrentPageReference. You can use design outlined in this document. In particular, observe the below two methods:

@wire(CurrentPageReference)
setCurrentPageReference(currentPageReference) {
    this.currentPageReference = currentPageReference;

    if (this.connected) {
        // We need to have the currentPageReference, and to be connected before
        // we can use NavigationMixin
        this.generateUrls();
    } else {
        // NavigationMixin doesn't work before connectedCallback, so if we have 
        // the currentPageReference, but haven't connected yet, queue it up
        this.generateUrlOnConnected = true;
    }
}

.......
.......
.......

connectedCallback() {
    this.connected = true;
    
    // If the CurrentPageReference returned before this component was connected,
    // we can use NavigationMixin to generate the URLs
    if (this.generateUrlOnConnected) {
        this.generateUrls();
    }
}

Notice how the checks generateUrlOnConnected and connected are used to trigger method this.generateUrls(). You would need to do something like this to update the current state whenever you navigate back to your LWC component.

Note: Although you can implement change handler in Aura, it is recommended to implement such design pattern in LWC as it would be useful when you completely migrate to LWC.