Suggest an edit

Improve this article

Refine the answer for “What is the "lifecycle" of a component in React?”. 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)

## Main stages of the lifecycle

| Stage | What happens |
|---|---|
| **Mounting** | The component is created and inserted into the DOM for the first time |
| **Updating** | The component re-renders due to changes in `props` or `state` |
| **Unmounting** | The component is removed from the DOM |
| **(optional)** - Error | An error occurs in the descendants and React invokes an error boundary |

---

## How this looks in practice

### 1. Mounting

Happens when the component first appears in the DOM.
React:

- calls the component function (or `constructor` in a class);
- renders the JSX;
- inserts the result into the DOM;
- runs all effects with **empty dependencies** (`useEffect(..., [])`).

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

Here you can:

- load data (fetch);
- subscribe to events;
- set up timers, listeners, external libraries.

---

### 2. Updating

The component re-renders when either of these change:

- its **props** (input data);
- its **state** (internal state).

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

Here you can:

- react to changes (for example, recompute data);
- synchronize the DOM with the new state;
- update subscriptions.

---

### 3. Unmounting

The component is removed from the DOM (for example, on a page change, hiding a modal, etc.).

At this moment, the **cleanup function** from `useEffect` is called:

```javascript
useEffect(() => {
  console.log("Mounting");
  return () => {
    console.log("Unmounting");
    // cleanup: unsubscribes, timers, canceling requests
  };
}, []);
```

Here you need to:

- clear timers (`clearInterval`);
- remove event handlers (`removeEventListener`);
- cancel subscriptions or requests.

---

## Illustration of the lifecycle (functional component)

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

React automatically calls the component again on every data change,
and hooks (`useEffect`) let you perform the needed actions at the right moment.

---

## Example of a full cycle

```javascript
function Example({ value }) {
  useEffect(() => {
    console.log("Mounting");

return () => {
      console.log("Unmounting");
    };
  }, []);

useEffect(() => {
    console.log("Updating: value =", value);
  }, [value]);

return <div>{value}</div>;
}
```

**Console log:**

```javascript
Mounting
Updating: value = 1
Updating: value = 2
Unmounting
```

---

## For clarity - the equivalent class methods

| Class method | Equivalent with functional hooks |
|---|---|
| `componentDidMount` | `useEffect(() => {...}, [])` |
| `componentDidUpdate` | `useEffect(() => {...}, [deps])` |
| `componentWillUnmount` | `useEffect(() => {return () => {...}}, [])` |

> That is, everything that used to be done in these methods
> is now done with `useEffect` and its **cleanup** function.

---

## Important to remember

| Behavior | Description |
|---|---|
| `useEffect` runs **after** the render and the DOM paint | It does not block the UI |
| `useLayoutEffect` runs **before the paint** | For synchronizing with the DOM |
| Every re-render of a component is a new "update" | React calls its function again |
| An effect with `[ ]` dependencies fires **only on mount and unmount** | "once" |
| An effect with `[deps]` fires on every dependency change | "on update" |

---

## Summary

| Stage | What React does | What you can do |
|---|---|---|
| **Mount** | Inserts the component into the DOM | Load data, subscribe |
| **Update** | Updates on props/state changes | React to changes |
| **Unmount** | Removes the component from the DOM | Clean up resources, timers, subscriptions |

---

**The main idea:**

> The "lifecycle" is a sequence of stages (mount → update → unmount),
> and hooks (`useEffect`, `useLayoutEffect`) let you control the component's behavior at every stage.

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

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.