Suggest an edit

Improve this article

Refine the answer for “What does componentWillUnmount() do?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

## Definition

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

---

## When it's called

1. The component is in the DOM.
2. React decides to remove it (for example, because of a `state`, `props`, or navigation change).
3. Before removing the element from the DOM, React calls `componentWillUnmount()`.
4. 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

1. **Never called manually.**
React calls it itself when removing the component.
2. **You cannot call** `setState()` **inside** `componentWillUnmount()`,
the component is already leaving, there is nothing to update.
3. 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 }, [])` |

Markdown · drag & drop images · ⌘B / ⌘I shortcuts483 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.