Lightning Web Components in Custom Tabs Are Reactive

Before Summer ’20, when a Lightning web component in a custom tab updated its query parameters, the framework recreated the component. Now, a component in a custom tab is reactive. When the component updates its query parameters, the component is rerendered and no longer recreated.

Where: This change applies to Lightning web components in Lightning Experience and all versions of the Salesforce app.

Why: Lightning web components are designed to reactively track updates to query parameters, but were not reactive when used in custom tabs. Now, when components are used in custom tabs, they are aligned with the reactive design of other Lightning web components.

How: When using a Lightning Web Component with a custom tab to update the pageReference.state query parameters on the current page, you must track the query parameters. Track query parameters by declaring the currentPageReference variable in your component before getting a reference to the current page with @wire(CurrentPageReference). If you don’t declare the currentPageReference variable, query parameters aren’t tracked, so they aren’t updated and maintain their present value.

To update your code, add the currentPageReference variable to your component's class.
export default class PageStateChangeExample extends NavigationMixin(LightningElement) {
    // Declare the currentPageReference variable in order to track it

    setCurrentPageReference(currentPageReference) {
        this.currentPageReference = currentPageReference;