Suggest an edit

Improve this article

Refine the answer for “Stages of the lifecycle”. 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)

## 3 main stages of a component's lifecycle

Every React component goes through **three main stages**:

1. **Mounting (Mount)** - creation and insertion into the DOM
2. **Updating (Update)** - re-rendering when data changes
3. **Unmounting (Unmount)** - removal from the DOM

---

## 1. Mounting (Mount)

This is the moment when a component is created for the first time and appears in the DOM. React calls the component, creates DOM elements, and "inserts" them into the page.

### What React does:

- calls the component for the first time (renders JSX);
- creates internal structures (Virtual DOM);
- inserts elements into the real DOM;
- calls effects (useEffect / useLayoutEffect) with an empty dependency array [].

### What you can do:

- API requests (fetch)
- Event subscriptions
- Setting up timers
- Interacting with the DOM

### Example:

```javascript
useEffect(() => {
  console.log("Component mounted");
}, []);
```

Called only once, when the component first appears.

---

## 2. Updating (Update)

Happens every time:

- props change (the component's input data),
- state changes (internal state),
- the parent component re-renders.

React calls the component again, compares the Virtual DOM, and updates only the parts that changed.

### What React does:

- calls the component again;
- updates the DOM if the JSX result has changed;
- calls effects whose dependencies have changed (useEffect(..., [deps])).

### What you can do:

- React to changes in state or props
- Update data when parameters change
- Synchronize the component with external state

### Example:

```javascript
useEffect(() => {
  console.log("Update: count changed");
}, [count]);
```

---

## 3. Unmounting (Unmount)

When a component is removed from the DOM (for example, the page changed, or a modal was closed).

React calls the cleanup functions from effects to release resources.

### What React does:

- removes the component from the DOM;
- calls the cleanup functions (return () => {...} inside useEffect).

### What you can do:

- Cancel requests
- Clear timers
- Remove event handlers
- Release resources

### Example:

```javascript
useEffect(() => {
  console.log("Mounted");
  return () => {
    console.log("Unmounted");
  };
}, []);
```

---

## Visually

```javascript
Mount → Update → Update → Unmount
```

Every component goes through this cycle (sometimes just mount → unmount, if it never updates).

---

## For comparison: class and functional approaches

| Stage | Class method | Hook (functional component) |
|---|---|---|
| Mounting | componentDidMount() | useEffect(() => {...}, []) |
| Updating | componentDidUpdate() | useEffect(() => {...}, [deps]) |
| Unmounting | componentWillUnmount() | useEffect(() => { return () => {...} }, []) |

---

## Additional "internal" stages (for a deeper understanding)

React 18, with its Fiber architecture, introduced a more detailed breakdown of the cycle:

| Phase | What happens |
|---|---|
| Render phase | React calls the components and builds the Virtual DOM (but does not yet change the real DOM) |
| Commit phase | React compares the old and new tree and applies the changes to the DOM |
| Layout phase | useLayoutEffect runs, along with DOM synchronization |
| Passive phase | Ordinary useEffect runs (asynchronously, after painting) |

These phases exist for optimization (concurrent rendering, startTransition, etc.), but in practice you usually work with the 3 main stages: Mount → Update → Unmount.

---

## Summary

| Stage | When it happens | What React does | What the developer does |
|---|---|---|---|
| Mount | On the first render | Creates and inserts the component into the DOM | Loads data, subscribes to events |
| Update | When props or state change | Re-renders the component | Reacts to changes |
| Unmount | When the component is removed | Removes the component from the DOM | Cleans up resources and subscriptions |

---

The main idea:

> A component's lifecycle is 3 key stages: Mounting → Updating → Unmounting, and hooks (useEffect, useLayoutEffect) let you perform actions at the right moment.

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

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.