Mamun Labs Learn
JourneyGlossary
esc
  • Try “map”, “flexbox” or “state”.
Log in
Start learning
Phase 5 · 3 / 9State with useState
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 5State with useState
01 / 10Overview

State with useState

You'll learn how useState remembers a value and redraws the screen when it changes.

Why it mattersEvery button, counter, form and list that changes on screen in React is driven by state.
about 2 h·needs: Components and JSX, Props
02 / 10

Watch & read

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

Docs
State: a component's memoryreact.dev · official docs · 25 min · English
MMamun's noteRead "When a regular variable isn't enough" and "Adding a state variable" slowly, and click through the examples. The rest is good too, but those two parts are the heart of this topic.
Video
Learn useState in 15 minutesYouTube · Web Dev Simplified · 9 min · English
MMamun's noteWatch 0:00–8:50. Kyle builds a counter and shows the setter with the previous value. Stop at "Class Components"; we only use function components.
VideoOptional
React Hooks Bangla: useState hookYouTube · Learn with Sumit · 20 min · Bangla
MMamun's noteIn Bangla. Watch 9:15–11:53 (how useState works), then 24:49–36:52 (state with arrays and objects, and the previous value). You can skip the part where he builds his own useState.
DocsOptional
Updating arrays in statereact.dev · official docs · 15 min · English
MMamun's noteRead "Adding to an array" and "Removing from an array". It shows why you make a new array instead of using push, which is the drill below.
03 / 10

See it step by step

Click, set state, render again.

count0
Counter.jsx
1function Counter() {
2 const [count, setCount] = useState(0);
3 return (
4 <button onClick={() => setCount(count + 1)}>
5 Clicked {count} times
6 </button>
7 );
8}
First render. React runs Counter. useState(0) has nothing saved yet, so count starts at 0.
Step 1 / 5
04 / 10

Explanation

A component is a function that returns what the screen should show. React calls it to render. Normal variables are forgotten every time the function runs again, so they can't remember a click.

useState gives a component memory: const [count, setCount] = useState(0). count is the current value, and setCount is how you change it. The 0 is only used the very first time.

Calling setCount(1) does not change count on the spot. It asks React to remember 1 and render the component again. On that new render, count is 1, and the screen shows the new value. That loop (event, set state, render, new screen) is how every interactive React app works.

Words to recognise
stateuseStatesetterrenderre-render[count, setCount]
05 / 10

Code tour

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

App.jsx5 notes
import { useState } from "react";
Mentor note · line 1
useState comes from the react package, so you import it at the top of the file.
2
3export default function LikeButton() {
const [likes, setLikes] = useState(0);
5
6 function handleClick() {
setLikes(likes + 1);
8 }
9
10 return (
<button onClick={handleClick}>
{likes} likes
13 </button>
14 );
15}
06 / 10

Practice

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

DrillPredict1 / 2
1function Counter() {
2  const [count, setCount] = useState(0);
3 
4  function handleClick() {
5    setCount(count + 1);
6    setCount(count + 1);
7  }
8 
9  return <button onClick={handleClick}>{count}</button>;
10}
What does the button show after one click?
DrillFind the bug2 / 2
In a React to-do app, setTasks(addTask(tasks, title)) adds a task. React only notices a change when it gets a new array. Fix addTask so it returns a new array and leaves the old one alone.
1
2
3
4
Try 1 of 3 · solution unlocks after 3
07 / 10

Quick check

3 questions. Each one explains itself after you answer.

  1. 1 / 3In useState(0), when is the 0 used?
  2. 2 / 3What does calling the setter, like setCount(5), do?
  3. 3 / 3A component has let likes = 0; and a button that runs likes = likes + 1. What happens on screen when you tap it?
08 / 10

Explain it back

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

How confident are you with State with useState?

10 / 10

Done

You can now
Read a useState line and say what happens on screen when the setter is called.
Next: Events in React Back to Phase 5
On this page
  1. 01State with useState
  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 5State with useState
01 / 10Overview

State with useState

You'll learn how useState remembers a value and redraws the screen when it changes.

Why it mattersEvery button, counter, form and list that changes on screen in React is driven by state.
about 2 h·needs: Components and JSX, Props
02 / 10

Watch & read

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

Docs
State: a component's memoryreact.dev · official docs · 25 min · English
MMamun's noteRead "When a regular variable isn't enough" and "Adding a state variable" slowly, and click through the examples. The rest is good too, but those two parts are the heart of this topic.
Video
Learn useState in 15 minutesYouTube · Web Dev Simplified · 9 min · English
MMamun's noteWatch 0:00–8:50. Kyle builds a counter and shows the setter with the previous value. Stop at "Class Components"; we only use function components.
VideoOptional
React Hooks Bangla: useState hookYouTube · Learn with Sumit · 20 min · Bangla
MMamun's noteIn Bangla. Watch 9:15–11:53 (how useState works), then 24:49–36:52 (state with arrays and objects, and the previous value). You can skip the part where he builds his own useState.
DocsOptional
Updating arrays in statereact.dev · official docs · 15 min · English
MMamun's noteRead "Adding to an array" and "Removing from an array". It shows why you make a new array instead of using push, which is the drill below.
03 / 10

See it step by step

Click, set state, render again.

count0
Counter.jsx
1function Counter() {
2 const [count, setCount] = useState(0);
3 return (
4 <button onClick={() => setCount(count + 1)}>
5 Clicked {count} times
6 </button>
7 );
8}
First render. React runs Counter. useState(0) has nothing saved yet, so count starts at 0.
Step 1 / 5
04 / 10

Explanation

A component is a function that returns what the screen should show. React calls it to render. Normal variables are forgotten every time the function runs again, so they can't remember a click.

useState gives a component memory: const [count, setCount] = useState(0). count is the current value, and setCount is how you change it. The 0 is only used the very first time.

Calling setCount(1) does not change count on the spot. It asks React to remember 1 and render the component again. On that new render, count is 1, and the screen shows the new value. That loop (event, set state, render, new screen) is how every interactive React app works.

Words to recognise
stateuseStatesetterrenderre-render[count, setCount]
05 / 10

Code tour

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

App.jsx5 notes
import { useState } from "react";
Mentor note · line 1
useState comes from the react package, so you import it at the top of the file.
2
3export default function LikeButton() {
const [likes, setLikes] = useState(0);
5
6 function handleClick() {
setLikes(likes + 1);
8 }
9
10 return (
<button onClick={handleClick}>
{likes} likes
13 </button>
14 );
15}
06 / 10

Practice

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

DrillPredict1 / 2
1function Counter() {
2  const [count, setCount] = useState(0);
3 
4  function handleClick() {
5    setCount(count + 1);
6    setCount(count + 1);
7  }
8 
9  return <button onClick={handleClick}>{count}</button>;
10}
What does the button show after one click?
DrillFind the bug2 / 2
In a React to-do app, setTasks(addTask(tasks, title)) adds a task. React only notices a change when it gets a new array. Fix addTask so it returns a new array and leaves the old one alone.
1
2
3
4
Try 1 of 3 · solution unlocks after 3
07 / 10

Quick check

3 questions. Each one explains itself after you answer.

  1. 1 / 3In useState(0), when is the 0 used?
  2. 2 / 3What does calling the setter, like setCount(5), do?
  3. 3 / 3A component has let likes = 0; and a button that runs likes = likes + 1. What happens on screen when you tap it?
08 / 10

Explain it back

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

How confident are you with State with useState?

10 / 10

Done

You can now
Read a useState line and say what happens on screen when the setter is called.
Next: Events in React Back to Phase 5
On this page
  1. 01State with useState
  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 is a function that returns what the screen should show. React calls it to render. Normal variables are forgotten every time the function runs again, so they can't remember a click.

useState gives a component memory: const [count, setCount] = useState(0). count is the current value, and setCount is how you change it. The 0 is only used the very first time.

Calling setCount(1) does not change count on the spot. It asks React to remember 1 and render the component again. On that new render, count is 1, and the screen shows the new value. That loop (event, set state, render, new screen) is how every interactive React app works.

Words to recognise
stateuseStatesetterrenderre-render[count, setCount]

A component is a function that returns what the screen should show. React calls it to render. Normal variables are forgotten every time the function runs again, so they can't remember a click.

useState gives a component memory: const [count, setCount] = useState(0). count is the current value, and setCount is how you change it. The 0 is only used the very first time.

Calling setCount(1) does not change count on the spot. It asks React to remember 1 and render the component again. On that new render, count is 1, and the screen shows the new value. That loop (event, set state, render, new screen) is how every interactive React app works.

Words to recognise
stateuseStatesetterrenderre-render[count, setCount]