Mamun Labs Learn
JourneyGlossary
esc
  • Try “map”, “flexbox” or “state”.
Log in
Start learning
Phase 5 · 8 / 9useEffect
Phase 5React
9 topics · 5–6 wks
  1. 1Components and JSX
  2. 2Props
  3. 3State with useState
  4. 4Events in React
  5. 5Showing things conditionally
  6. 6Lists and keys
  7. 7Forms and inputs
  8. 8useEffect
  9. 9Fetching data in React
JourneyPhase 5useEffect
01 / 10Overview

useEffect

You'll learn when an effect runs, and how the dependency array decides when it runs again.

Why it mattersTimers, page titles and loading data from the internet all happen in effects, so you'll read useEffect in almost every app.
about 2 h·needs: State with useState, Events in React
02 / 10

Watch & read

Start with the required ones. The others are there when you need them.

Docs
Synchronizing with effectsreact.dev · official docs · 30 min · English
MMamun's noteRead from the top to the end of "How to handle the Effect firing twice in development". Do steps 1 to 3 with the live examples. Skip the rest for now.
Video
Full React tutorial #14: useEffect hook (the basics)YouTube · Net Ninja · 4 min · English
MMamun's noteFour minutes. He logs from an effect so you can see it run after every render.
Video
Full React tutorial #15: useEffect dependenciesYouTube · Net Ninja · 4 min · English
MMamun's noteThe follow-up. He adds a dependency array with name in it, and shows when the effect runs and when it is skipped. Watch all of it.
VideoOptional
React Hooks Bangla: useEffect hookYouTube · Learn with Sumit · 25 min · Bangla
MMamun's noteIn Bangla. Watch 0:41–6:03 (what side effects are), then 12:21–31:18 (every render, with dependencies, only once, and cleanup). Skip the class component part from 6:03 to 12:21.
03 / 10

See it step by step

Render first, then the effect. A changed dependency runs it again.

count0
Inbox.jsx
1function Inbox() {
2 const [count, setCount] = useState(0);
3 console.log("render", count);
4
5 useEffect(() => {
6 console.log("effect", count);
7 document.title = count + " new messages";
8 }, [count]);
9
10 return <button onClick={() => setCount(count + 1)}>{count}</button>;
11}
First render. React runs Inbox and count starts at 0.
Step 1 / 9
04 / 10

Explanation

A component's job is to return JSX. But sometimes you must also do something outside React, like change the browser tab title, start a timer, or ask a server for data. That kind of work is called a side effect, and useEffect is where it goes.

useEffect(() => {
  document.title = count + " new messages";
}, [count]);

An effect runs after React has put the screen up. First the render, then the effect. The list at the end, [count], is the dependency array. It tells React when to run the effect again:

  • [count]: after the first render, and again after any render where count changed.
  • []: only once, after the first render.
  • no array at all: after every render.

An effect can return a function, called cleanup. React runs it before the effect runs again, and when the component leaves the screen. Use it to stop a timer you started.

In development, React runs each effect one extra time when the component first appears. It does this on purpose, to check your cleanup works. It does not happen in the real app.

People often set state in an effect with no dependency array. Setting state renders again, the effect runs again, sets state again, and the loop never ends. Always give the array.

When you read an effect, read the last line first: the dependency array tells you when it runs.

Words to recognise
useEffecteffectdependency arraycleanup
05 / 10

Code tour

Click a line number with a ring to read the note for that line.

App.jsx5 notes
1import { useEffect, useState } from "react";
2
3export default function StudyTimer() {
4 const [seconds, setSeconds] = useState(0);
5
useEffect(() => {
Mentor note · line 6
The effect. React runs this function after the screen first appears.
const id = setInterval(() => {
setSeconds((s) => s + 1);
9 }, 1000);
return () => clearInterval(id);
}, []);
12
13 return <p>You have studied for {seconds} seconds.</p>;
14}
06 / 10

Practice

Short drills. Take your time and read the code before you answer.

DrillPredict1 / 1
1function Profile() {
2  const [count, setCount] = useState(0);
3  const [name, setName] = useState("Rafi");
4 
5  useEffect(() => {
6    console.log("effect ran");
7  }, [count]);
8 
9  return (
10    <div>
11      <button onClick={() => setCount(count + 1)}>+1</button>
12      <button onClick={() => setName("Nusrat")}>Rename</button>
13    </div>
14  );
15}
16 
17// The screen appears. You tap "+1" once, then "Rename" once.
18// Count the runs in the real app (not the extra development check).
How many times does this effect run?
07 / 10

Quick check

3 questions. Each one explains itself after you answer.

  1. 1 / 3When does an effect run, compared to the render?
  2. 2 / 3How often does useEffect(() => { ... }, []) run in the real app?
  3. 3 / 3What happens with useEffect(() => { setCount(count + 1); }), with no array?
08 / 10

Explain it back

Only you can see this. Log in to keep it.0 words
09 / 10

How confident are you with useEffect?

10 / 10

Done

You can now
Read a useEffect and say when it runs, from its dependency array.
Next: Fetching data in React Back to Phase 5
On this page
  1. 01useEffect
  2. 02Watch & read
  3. 03See it step by step
  4. 04Explanation
  5. 05Code tour
  6. 06Practice
  7. 07Quick check
  8. 08Explain it back
  9. 09Confidence
  10. 10Done
Up next · 02 / 10Watch & read
Mamun Labs LearnFound a mistake on this page? Tell Mamun.
Mamun Labs Learn
JourneyGlossary
esc
  • Try “map”, “flexbox” or “state”.
Log in
Start learning
Log in to save your progress. Everything here works without an account.Log in to save progressLog in
Phase 5React
9 topics · 5–6 wks
  1. 1Components and JSX
  2. 2Props
  3. 3State with useState
  4. 4Events in React
  5. 5Showing things conditionally
  6. 6Lists and keys
  7. 7Forms and inputs
  8. 8useEffect
  9. 9Fetching data in React
JourneyPhase 5useEffect
01 / 10Overview

useEffect

You'll learn when an effect runs, and how the dependency array decides when it runs again.

Why it mattersTimers, page titles and loading data from the internet all happen in effects, so you'll read useEffect in almost every app.
about 2 h·needs: State with useState, Events in React
02 / 10

Watch & read

Start with the required ones. The others are there when you need them.

Docs
Synchronizing with effectsreact.dev · official docs · 30 min · English
MMamun's noteRead from the top to the end of "How to handle the Effect firing twice in development". Do steps 1 to 3 with the live examples. Skip the rest for now.
Video
Full React tutorial #14: useEffect hook (the basics)YouTube · Net Ninja · 4 min · English
MMamun's noteFour minutes. He logs from an effect so you can see it run after every render.
Video
Full React tutorial #15: useEffect dependenciesYouTube · Net Ninja · 4 min · English
MMamun's noteThe follow-up. He adds a dependency array with name in it, and shows when the effect runs and when it is skipped. Watch all of it.
VideoOptional
React Hooks Bangla: useEffect hookYouTube · Learn with Sumit · 25 min · Bangla
MMamun's noteIn Bangla. Watch 0:41–6:03 (what side effects are), then 12:21–31:18 (every render, with dependencies, only once, and cleanup). Skip the class component part from 6:03 to 12:21.
03 / 10

See it step by step

Render first, then the effect. A changed dependency runs it again.

count0
Inbox.jsx
1function Inbox() {
2 const [count, setCount] = useState(0);
3 console.log("render", count);
4
5 useEffect(() => {
6 console.log("effect", count);
7 document.title = count + " new messages";
8 }, [count]);
9
10 return <button onClick={() => setCount(count + 1)}>{count}</button>;
11}
First render. React runs Inbox and count starts at 0.
Step 1 / 9
04 / 10

Explanation

A component's job is to return JSX. But sometimes you must also do something outside React, like change the browser tab title, start a timer, or ask a server for data. That kind of work is called a side effect, and useEffect is where it goes.

useEffect(() => {
  document.title = count + " new messages";
}, [count]);

An effect runs after React has put the screen up. First the render, then the effect. The list at the end, [count], is the dependency array. It tells React when to run the effect again:

  • [count]: after the first render, and again after any render where count changed.
  • []: only once, after the first render.
  • no array at all: after every render.

An effect can return a function, called cleanup. React runs it before the effect runs again, and when the component leaves the screen. Use it to stop a timer you started.

In development, React runs each effect one extra time when the component first appears. It does this on purpose, to check your cleanup works. It does not happen in the real app.

People often set state in an effect with no dependency array. Setting state renders again, the effect runs again, sets state again, and the loop never ends. Always give the array.

When you read an effect, read the last line first: the dependency array tells you when it runs.

Words to recognise
useEffecteffectdependency arraycleanup
05 / 10

Code tour

Click a line number with a ring to read the note for that line.

App.jsx5 notes
1import { useEffect, useState } from "react";
2
3export default function StudyTimer() {
4 const [seconds, setSeconds] = useState(0);
5
useEffect(() => {
Mentor note · line 6
The effect. React runs this function after the screen first appears.
const id = setInterval(() => {
setSeconds((s) => s + 1);
9 }, 1000);
return () => clearInterval(id);
}, []);
12
13 return <p>You have studied for {seconds} seconds.</p>;
14}
06 / 10

Practice

Short drills. Take your time and read the code before you answer.

DrillPredict1 / 1
1function Profile() {
2  const [count, setCount] = useState(0);
3  const [name, setName] = useState("Rafi");
4 
5  useEffect(() => {
6    console.log("effect ran");
7  }, [count]);
8 
9  return (
10    <div>
11      <button onClick={() => setCount(count + 1)}>+1</button>
12      <button onClick={() => setName("Nusrat")}>Rename</button>
13    </div>
14  );
15}
16 
17// The screen appears. You tap "+1" once, then "Rename" once.
18// Count the runs in the real app (not the extra development check).
How many times does this effect run?
07 / 10

Quick check

3 questions. Each one explains itself after you answer.

  1. 1 / 3When does an effect run, compared to the render?
  2. 2 / 3How often does useEffect(() => { ... }, []) run in the real app?
  3. 3 / 3What happens with useEffect(() => { setCount(count + 1); }), with no array?
08 / 10

Explain it back

Only you can see this. Log in to keep it.0 words
09 / 10

How confident are you with useEffect?

10 / 10

Done

You can now
Read a useEffect and say when it runs, from its dependency array.
Next: Fetching data in React Back to Phase 5
On this page
  1. 01useEffect
  2. 02Watch & read
  3. 03See it step by step
  4. 04Explanation
  5. 05Code tour
  6. 06Practice
  7. 07Quick check
  8. 08Explain it back
  9. 09Confidence
  10. 10Done
Up next · 02 / 10Watch & read

A component's job is to return JSX. But sometimes you must also do something outside React, like change the browser tab title, start a timer, or ask a server for data. That kind of work is called a side effect, and useEffect is where it goes.

useEffect(() => {
  document.title = count + " new messages";
}, [count]);

An effect runs after React has put the screen up. First the render, then the effect. The list at the end, [count], is the dependency array. It tells React when to run the effect again:

  • [count]: after the first render, and again after any render where count changed.
  • []: only once, after the first render.
  • no array at all: after every render.

An effect can return a function, called cleanup. React runs it before the effect runs again, and when the component leaves the screen. Use it to stop a timer you started.

In development, React runs each effect one extra time when the component first appears. It does this on purpose, to check your cleanup works. It does not happen in the real app.

People often set state in an effect with no dependency array. Setting state renders again, the effect runs again, sets state again, and the loop never ends. Always give the array.

When you read an effect, read the last line first: the dependency array tells you when it runs.

Words to recognise
useEffecteffectdependency arraycleanup

A component's job is to return JSX. But sometimes you must also do something outside React, like change the browser tab title, start a timer, or ask a server for data. That kind of work is called a side effect, and useEffect is where it goes.

useEffect(() => {
  document.title = count + " new messages";
}, [count]);

An effect runs after React has put the screen up. First the render, then the effect. The list at the end, [count], is the dependency array. It tells React when to run the effect again:

  • [count]: after the first render, and again after any render where count changed.
  • []: only once, after the first render.
  • no array at all: after every render.

An effect can return a function, called cleanup. React runs it before the effect runs again, and when the component leaves the screen. Use it to stop a timer you started.

In development, React runs each effect one extra time when the component first appears. It does this on purpose, to check your cleanup works. It does not happen in the real app.

People often set state in an effect with no dependency array. Setting state renders again, the effect runs again, sets state again, and the loop never ends. Always give the array.

When you read an effect, read the last line first: the dependency array tells you when it runs.

Words to recognise
useEffecteffectdependency arraycleanup