Component Lifecycle

Problem

Event listeners accumulate without being removed, subscriptions leak memory, and API calls fire at the wrong time. Components that don’t properly manage their lifecycle phases create performance issues, memory leaks, and race conditions where stale data overwrites fresh updates.

Solution

Hook into mount, update, and unmount phases to initialize resources, respond to prop changes, and clean up side effects. This ensures event listeners are removed, timers are cleared, and subscriptions are canceled when components are destroyed.

Example

This example shows how to use Web Component lifecycle hooks to set up a data subscription on mount and clean it up on unmount to prevent memory leaks.

// Web Component with lifecycle management
class DataSubscriber extends HTMLElement {
  // Called when component is added to the DOM
  connectedCallback() {
    // Subscribe to data source and store reference for cleanup
    this.subscription = dataSource.subscribe(data => {
      this.render(data);
    });
  }

  // Called when component is removed from the DOM
  disconnectedCallback() {
    // Clean up subscription to prevent memory leaks
    if (this.subscription) {
      this.subscription.unsubscribe();
    }
  }
}

Benefits

• Prevents memory leaks by ensuring proper cleanup of subscriptions and listeners.
• Enables components to respond appropriately to mount, update, and unmount events.
• Provides clear hooks for initializing and tearing down resources.
• Prevents race conditions by cleaning up stale async operations.
• Makes component behavior predictable and testable.

Tradeoffs

• Easy to forget cleanup functions, leading to subtle memory leaks.
• Complex dependency arrays can make useEffect hooks hard to understand.
• Excessive lifecycle logic can make components harder to reason about.
• May trigger unnecessary re-renders if not carefully managed.
• Debugging lifecycle issues can be challenging in complex component trees.