disconnectedCallback () in LWC with example

What is disconnectedCallback():

The disconnectedCallback() is one of the life cycle functions of modern web components.

When disconnectedCallback() fired?

It gets invoked automatically when the corresponding web component gets removed from DOM. If we need to perform any logic when the component is removed from DOM, that logic can be added in disconnectedCallback(). This hook flows from Parent component to child. We use disconnectedCallback() to purging caches or removing event listeners that are created on connectedCallback().

Also Check: connectedCallback() LWC with example.

disconnectedCallback() in LWC Example

In this example, we have two components. Those are 'disconnectedCallbackParentLwc' and 'disconnectedCallbackChildLwc'. Here disconnectedCallbackChildLwc referred in parent component. In the parent component, we have a button 'Show/Hide' to show and hiding the child component. Initially, the child component displayed, once users click on the button 'disconnectedCallbackChildLwc' the child component removed from DOM. Since the component getting removed from DOM, disconnectedCallback function on the child component gets invoked and an alert will appear.

disConnectedCallbackChildLwc.js

import { LightningElement } from 'lwc';
export default class DisConnectedCallbackChildLwc extends LightningElement {
    disconnectedCallback() {
        console.log('child disconnected callback')
    }
}

disConnectedCallbackChildLwc.html

<template>
    <p>I am child LWC component</p>
</template>

disConnectedCallbackParentLwc.js

import { LightningElement } from 'lwc';
export default class DisConnectedCallbackParentLwc extends LightningElement {
    show = true;
    handleShowHide() {
        this.show = !this.show;
    }
}

disConnectedCallbackParentLwc.html

<template>
    <lightning-card title="disconnectedCallback Example">
        <p>Parent LWC component</p>
        <lightning-button variant="brand" slot="actions" label="Show/Hide" onclick={handleShowHide}
            class="slds-m-left_x-small"></lightning-button>
        <template if:true={show}>
            <c-dis-connected-callback-child-lwc></c-dis-connected-callback-child-lwc>
        </template>
    </lightning-card>
</template>

Output

Subjects:

disconnectedCallback in LWC Lightning Web Components Lightning Web Components Basics lightning web components interview questions LWC LWC Basics LWC code