Introduction
The disconnectedCallback() method is automatically called when an LWC component is removed from the DOM.
This hook is the last step in the lifecycle of a component, making it the ideal place to clean up resources and unsubscribe from services.
Key Roles
1. Resource Cleanup:
Release any resources (e.g., timers, event listeners, or subscriptions) that were allocated during the component’s lifecycle.
2. Unsubscribe from Services:
Unsubscribe from messaging services, like the Lightning Message Service (LMS) or custom event handlers, to prevent memory leaks or unnecessary callbacks.
3. Resetting States:
Prepare the component for potential reuse by resetting any states or properties if needed.
Properties of disconnectedCallbacks
1. Automatic Invocation:
This hook is automatically triggered when the component is removed from the DOM, either manually or due to framework behaviour.
2. Access to Component State:
You still have access to the component’s properties and methods at this stage, which allows you to perform necessary cleanup tasks.
3. No DOM Access:
While you can access component-level properties, the DOM is no longer guaranteed to be available for interaction.
Avoid manipulating or querying the DOM in this hook.
When to Use disconnectedCallback()
- Removing Event Listeners:
Unbind event listeners attached to global objects like window or document. - Clearing Timers or Intervals:
Stop any setTimeout or setInterval calls that were started during the component’s lifecycle. - Unsubscribing from Services:
Disconnect from services like LMS or custom Pub/Sub systems. - Resetting Component Data:
Clear temporary data or reset states for proper cleanup.
- Removing Event Listeners:
Example of disconnectedCallback()
Here’s a simple example showing the typical use cases for disconnectedCallback():
HTML File (disconnectedCallbackDemo.html):
<template>
<div>
<h1 id="disconnected-callback-demo" class="rb-heading-index-12">Disconnected Callback Demo</h1>
<button onclick={startTimer}>Start Timer</button>
</div>
</template>
JavaScript File (disconnectedCallbackDemo.js):
import { LightningElement } from 'lwc';
export default class DisconnectedCallbackDemo extends LightningElement {
timer;
connectedCallback() {
console.log('Component added to DOM');
window.addEventListener('resize', this.handleResize);
}
disconnectedCallback() {
console.log('Component removed from DOM');
// Clear timers
if (this.timer) {
clearTimeout(this.timer);
this.timer = null;
}
// Remove event listeners
window.removeEventListener('resize', this.handleResize);
// Unsubscribe from services if applicable
this.unsubscribeFromChannel();
}
startTimer() {
this.timer = setTimeout(() => {
console.log('Timer executed');
}, 5000);
}
handleResize() {
console.log('Window resized');
}
unsubscribeFromChannel() {
console.log('Unsubscribed from the channel');
}
}
Explore the post below to learn about the five different lifecycle hooks in LWC.
Best Practices for disconnectedCallback()
1. Always Clean Up Resources:
Make sure to release all resources allocated in connectedCallback() or during the component’s lifecycle.
2. Avoid DOM Manipulation:
The DOM structure might already be removed; do not try to query or modify DOM elements.
3. Unsubscribe Safely:
Ensure all subscriptions or global listeners are unsubscribed to avoid memory leaks.
4. Use it for Necessary Cleanup Only:
Do not perform heavy logic or reallocate resources in this hook.
Key Takeaways
- •The disconnectedCallback() hook is essential for ensuring efficient resource management and preventing memory leaks in LWC components.
- •Use it to clean up event listeners, timers, or service subscriptions.
- •Avoid interacting with the DOM, as it may already be removed.
By leveraging disconnectedCallback() effectively, you can maintain a clean and efficient component lifecycle in your Salesforce applications.
Checkout below posts to explore other Lifecycle hooks in LWC in detail
