What does componentWillUnmount() do?

ReactJunior~2 min read

Definition

componentWillUnmount() is a lifecycle method that is called once, right before the component is unmounted.

When it's called

The component is in the DOM.
React decides to remove it (for example, because of a state, props, or navigation change).
Before removing the element from the DOM, React calls componentWillUnmount().
After that, React removes the node from the DOM and forgets the component.

Signature

javascript

componentWillUnmount() {
  // Cleanup: unsubscriptions, timers, listeners, WebSocket, effects, etc.
}

Example

javascript

class Timer extends React.Component {
  componentDidMount() {
    this.intervalId = setInterval(() => {
      console.log('tick');
    }, 1000);
  }

  componentWillUnmount() {
    clearInterval(this.intervalId); // clean up the timer
    console.log('Component removed');
  }

  render() {
    return <div>Timer active</div>;
  }
}

What happens:

When the component mounts → an interval is created.
When it's removed → componentWillUnmount clears the interval.
After that, React removes the component from the DOM and frees memory.

Important

Never called manually. React calls it itself when removing the component.
You cannot call setState() inside componentWillUnmount(), the component is already leaving, there is nothing to update.
This method is the best place to clean up any side effects:

clearing timers (clearInterval, clearTimeout)
unsubscribing from events (removeEventListener)
closing connections (WebSocket, SSE)
canceling network requests (AbortController)
cleaning up external libraries (for example, chart.destroy())

The equivalent in function components

In function components, the equivalent is the cleanup function inside useEffect():

javascript

function Timer() {
  useEffect(() => {
    const id = setInterval(() => console.log('tick'), 1000);
    return () => {
      clearInterval(id); // equivalent of componentWillUnmount
      console.log('Component removed');
    };
  }, []); // [] → the effect runs only on mount and unmount

  return <div>Timer active</div>;
}

React calls the cleanup function on unmount or before the next run of the effect.

The lifecycle, put together

Stage	Method	When it's called
Mounting	`componentDidMount()`	After being added to the DOM
Updating	`componentDidUpdate()`	After the DOM updates
Unmounting	`componentWillUnmount()`	Before being removed from the DOM

Example in a real scenario

javascript

class Chat extends React.Component {
  componentDidMount() {
    this.socket = new WebSocket('wss://chat.example');
    this.socket.onmessage = (msg) => console.log(msg);
  }

  componentWillUnmount() {
    this.socket.close(); // close the connection
  }

  render() {
    return <div>Connected to chat</div>;
  }
}

If the component disappears from the page (for example, the user left the room), componentWillUnmount() closes the WebSocket, so there are no memory leaks or errors.

Summary

componentWillUnmount() is called once, before the component is removed from the DOM, and is used to clean up resources, subscriptions, and timers.

Class component	Function component equivalent
`componentWillUnmount()`	The cleanup function from `useEffect(() => { ... return cleanup }, [])`

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.