# Component Lifecycle
Course: [React](https://www.devtutorials.ai/learn/react) ยท Section: React Hooks
Source: https://www.devtutorials.ai/learn/react/hooks/component-lifecycle
> Mounting, updating and unmounting, how rendering and effects fit together, managing the lifecycle with useEffect, effect dependencies and dependency arrays, cleanup functions, and avoiding infinite effect loops.
## Introduction to Component Lifecycle
The **lifecycle** of a component is the set of stages it goes through: it appears on the screen, it changes, and it is removed from the screen.
Knowing the lifecycle tells you **when** your code runs. For example: load data when the component appears, and stop a timer when it is removed.
### Real-World Example
A bookshop's `OrderTracker` component appears when the user opens an order. In `useEffect`, it starts a timer that asks the server for the delivery status every 10 seconds.
When the user leaves the page, React removes the component and runs the cleanup function, which stops the timer. Without the cleanup, the requests would continue in the background.
Every component has three stages: **mounting** (appears), **updating** (changes), and **unmounting** (is removed).
## Lifecycle Phases and React Rendering
The three stages are called **phases**.
A component mounts once, may update many times, and unmounts once.
Each time a component goes through a phase, React **renders** it: it runs the component function to get the new TSX. Then React updates the screen. After the screen is updated, React runs your **effects**.
Effects always run last, after the screen is updated.
- **Render** โ React runs your component function. Do not do side work here, only work out the TSX.
- **Update the screen** โ React changes the page to match.
- **Run effects** โ React runs your `useEffect` code. This is where side work goes, such as timers and loading data.
## Mounting Phase
**Mounting** is when a component appears on the screen for the first time. It happens once.
In the mounting phase:
1. React runs the component function. State gets its starting values.
2. React puts the TSX on the screen.
3. React runs every `useEffect` in the component.
To run code **only once**, when the component mounts, use an effect with an **empty** dependency array `[]`.
```tsx
useEffect(() => {
console.log("Shop opened");
}, []); // [] means: only after mounting
```
## Updating Phase
**Updating** happens when the component's state or props change. React renders the component again and updates the screen. This can happen many times.
To run code after an update, put the value you care about in the dependency array. The effect then runs after mounting, and again each time that value changes.
```tsx
useEffect(() => {
console.log("Cart now has " + count + " books");
}, [count]); // runs when count changes
```
## Unmounting Phase
**Unmounting** is when a component is removed from the screen. For example, a pop-up is closed, or the user goes to another page.
Before it is removed, a component should **clean up** anything it started: stop timers, stop listening to events, and cancel work that is still running. You do this with a **cleanup function**, which you return from the effect.
```tsx
useEffect(() => {
console.log("Shop opened");
return () => {
console.log("Shop closed"); // runs when the component is removed
};
}, []);
```
## Lifecycle Management with useEffect
In function components, `useEffect` handles all three phases. You choose the phase with the **dependency array** and the **cleanup function**.
| You want to run code... | Write |
|---|---|
| Once, when the component mounts | `useEffect(() => { ... }, [])` |
| When a value changes (and on mount) | `useEffect(() => { ... }, [value])` |
| After every render | `useEffect(() => { ... })` (no array) |
| When the component unmounts | `return () => { ... }` inside an effect with `[]` |
## Component Lifecycle Flow with Examples
The lab below logs every phase. `BookPanel` has three effects: one for mount and unmount, one for updates, and one that runs after every render.
);
}
`,
"App.css": `.panel { border: 1px solid #cbd5e1; border-radius: 8px; padding: 4px 12px 12px; margin-top: 8px; }
`,
"main.tsx": `import { createRoot } from "react-dom/client";
createRoot(document.getElementById("root")!).render();
`,
}}
/>
Read the console as you try each step:
1. **On load:** "Render", then "Mounted", then "Effect: likes is now 0".
2. **Click Like:** "Render: likes = 1", then "Effect: likes is now 1". The mount effect does **not** run again.
3. **Click Hide panel:** "Unmounted: BookPanel removed". The cleanup function ran.
4. **Click Show panel:** the panel mounts again, from the start, with `likes = 0`.
"Render" always comes before the effects. React first works out the TSX and updates the screen. Only then does it run your effects.
## Common Lifecycle Scenarios
Most effects you write will follow one of these patterns.
### Scenario 1: Load Data When the Component Mounts
```tsx
useEffect(() => {
fetchBooks().then((list) => setBooks(list));
}, []);
```
### Scenario 2: Run Again When a Value Changes
When the user picks a new category, load the books for that category.
```tsx
useEffect(() => {
fetchBooks(category).then((list) => setBooks(list));
}, [category]);
```
### Scenario 3: Start Something, and Stop It on Unmount
Start a timer, an event listener or a connection, and stop it in the cleanup.
```tsx
useEffect(() => {
const id = setInterval(() => setSeconds((s) => s + 1), 1000);
return () => clearInterval(id);
}, []);
```
### Scenario 4: Keep Something Outside React in Step with State
```tsx
useEffect(() => {
document.title = count + " books in cart";
}, [count]);
```
## Effect Dependencies
A **dependency** is a value from your component that the effect uses, such as a state, a prop, or a variable made from them.
**Every value the effect uses should be in the dependency array.** Then React knows to run the effect again when one of them changes.
```tsx
useEffect(() => {
console.log("Showing " + category + " books, page " + page);
}, [category, page]); // both values are used, so both are listed
```
If you leave one out, the effect uses an **old** value of it. This is a common bug.
{" "}
{" "}
Wrong (missing dependency): {wrongTitle}
Right (category listed): {rightTitle}
);
}
`,
"main.tsx": `import { createRoot } from "react-dom/client";
createRoot(document.getElementById("root")!).render();
`,
}}
/>
Click **Biography**. The "Right" line changes. The "Wrong" line still says "Fiction", because its effect ran only once, on mount.
## Dependency Arrays
The **dependency array** is the second input to `useEffect`. It decides **when** the effect runs. There are three forms.
Green means the effect runs in that render. The array decides when.
| Form | When the effect runs | Use it for |
|---|---|---|
| No array: `useEffect(fn)` | After **every** render | Rarely needed |
| Empty: `useEffect(fn, [])` | Once, after mounting | Loading data once, starting a timer |
| With values: `useEffect(fn, [a, b])` | After mounting, and when `a` or `b` changes | Reacting to a change |
{" "}
);
}
`,
"main.tsx": `import { createRoot } from "react-dom/client";
createRoot(document.getElementById("root")!).render();
`,
}}
/>
On load, all three effects run. Click **View**: only "No array" runs. Click **Like**: "No array" and "[likes]" run. The "[]" effect never runs again.
## Cleanup Functions
A **cleanup function** is the function you **return** from an effect. React runs it at two times:
- **Before the effect runs again**, because a dependency changed. This cleans up the old run.
- **When the component unmounts.**
Without cleanup, timers keep running and listeners keep listening after the component is gone. This wastes memory and can cause errors.
Every effect that starts something should stop it in its cleanup.
{reading && }
);
}
`,
"main.tsx": `import { createRoot } from "react-dom/client";
createRoot(document.getElementById("root")!).render();
`,
}}
/>
The seconds go up. Click **Stop reading**. The console says "Timer stopped", because the cleanup ran `clearInterval(id)`. Click **Start reading**, and a new timer starts from 0.
Look at these lines:
```tsx
const id = setInterval(...); // start: keep the timer's id
return () => clearInterval(id); // cleanup: stop that timer
```
The effect keeps the timer's `id`, so the cleanup knows which timer to stop.
## Preventing Infinite Effect Loops
An **infinite loop** happens when an effect changes a value that is also in its own dependency array. The effect runs, changes the value, so it runs again, changes it again, and so on forever. The page freezes or React stops it with an error.
This circle never stops. Add a stop condition, or do not use an effect.
```tsx
// Wrong: count changes, so the effect runs, so count changes...
useEffect(() => {
setCount(count + 1);
}, [count]);
```
Another common cause is an effect with **no array** that sets state. Every render runs the effect, the effect sets state, and setting state causes a render.
```tsx
// Wrong: no array, and the effect sets state
useEffect(() => {
setBooks(loadBooks());
});
```
How to avoid loops:
- **Always write a dependency array.** Use `[]` for "once".
- **Do not set a state that the effect depends on**, unless there is a condition that stops it.
- **Ask: do I need an effect at all?** If you can work out a value from props or state, just calculate it in the component. No effect and no extra state needed.
```tsx
// No effect needed: just calculate it
const total = books.length * 299;
```
);
}
`,
"main.tsx": `import { createRoot } from "react-dom/client";
createRoot(document.getElementById("root")!).render();
`,
}}
/>
This effect depends on `stock` and changes `stock`. It does not loop forever, because of `if (stock > 0)`. When the stock reaches 0, the effect stops changing it.
Before you write an effect, ask: "Is this work outside React?" If not, you probably do not need an effect.
## Common mistakes
| Mistake | What you see | Fix |
|---|---|---|
| Effect with no dependency array that sets state | The page freezes: an infinite loop | Add a dependency array |
| Setting a state that is in the effect's own array | An infinite loop | Add a stop condition, or remove the effect |
| Leaving out a value the effect uses | The effect uses an old value | List every value the effect uses |
| Forgetting to clear a timer or listener | It keeps running after the component is gone | Return a cleanup function |
| Doing side work (like timers) directly in the component body | It runs on every render | Move it into `useEffect` |
| Using an effect to calculate a value from state | Extra renders and extra state | Calculate it directly in the component |
| Expecting `[]` effects to see new state | The effect shows the starting value | Add the state to the array |
## Check Yourself
## Exercises
## What to Remember
- A component mounts once, updates many times, and unmounts once. Effects run after the screen updates.
- The dependency array decides when an effect runs: none = every render, `[]` = once, `[a]` = when `a` changes.
- Return a cleanup function to stop timers and listeners, and add a stop condition so an effect never loops forever.
Next: Application State Management