✅ What is componentWillUnmount() in React?

componentWillUnmount() is a lifecycle method in React class components that runs just before a component is removed from the DOM. It is mainly used to clean up anything the component started during its lifetime, such as timers, event listeners, subscriptions, or background tasks. You can think of it as a cleanup phase that ensures your application does not leave behind memory leaks or unnecessary processes after a component disappears.

🧠 Why use componentWillUnmount()?

When a component is removed, side effects like intervals, listeners, or open connections can continue running in the background. This may lead to memory leaks, unexpected bugs, and performance issues. componentWillUnmount() provides a safe and predictable place to stop or clear these side effects before the component is destroyed.

🌍 Where is componentWillUnmount() used?

This method is used only in React class components. Common scenarios include stopping intervals or timeouts, cancelling API polling or WebSocket connections, removing global event listeners such as window.addEventListener, and cleaning up animations or manually created DOM elements.

🚀 Syntax

componentWillUnmount() {
  // cleanup code here
}

🔧 Example: Clock component with cleanup

import React from "react";

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = { time: new Date().toLocaleTimeString() };
  }

  componentDidMount() {
    this.timerID = setInterval(() => {
      this.setState({ time: new Date().toLocaleTimeString() });
    }, 1000);
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
    console.log("Clock component unmounted and timer cleared");
  }

  render() {
    return <h2>Current Time: {this.state.time}</h2>;
  }
}

export default Clock;

In this example, componentDidMount starts a timer when the component loads, and componentWillUnmount clears that timer before the component is removed. This prevents the timer from continuing to run in the background.

🔁 Functional component equivalent using useEffect

In functional components, the cleanup logic is handled by returning a function from useEffect.

import React, { useEffect, useState } from "react";

function Clock() {
  const [time, setTime] = useState(new Date().toLocaleTimeString());

  useEffect(() => {
    const timerID = setInterval(() => {
      setTime(new Date().toLocaleTimeString());
    }, 1000);

    return () => {
      clearInterval(timerID);
      console.log("Clock unmounted in functional component");
    };
  }, []);

  return <h2>Current Time: {time}</h2>;
}

Here, the function returned from useEffect behaves exactly like componentWillUnmount().

📋 Summary

componentWillUnmount() is a React class lifecycle method that runs right before a component is removed from the DOM. Its main purpose is to clean up side effects such as timers, event listeners, and subscriptions. In functional components, the same behavior is achieved using the cleanup function returned from useEffect.

✅ Best practices

Always clean up long-running processes inside componentWillUnmount(), use it to remove side effects that might outlive the component, and avoid starting new processes inside this method.

📌 Common use cases

Clearing setInterval or setTimeout, detaching global event listeners, disconnecting WebSocket or API polling, and cleaning up animations or manual DOM manipulations.

🧾 Conclusion

componentWillUnmount() plays a crucial role in keeping React applications stable and performant by ensuring components exit cleanly. Whether you are working with class components or translating logic into hooks, understanding this lifecycle method helps you avoid memory leaks and subtle bugs when components unmount.