What is state?

Learn that state is data inside a component that can change.

What is state?

A component's state is data that changes over time. A counter, the text in an input, an open menu — all of these are state.

A plain variable does not work: each render resets it. To let React know about changes you use the useState hook.

useState gives you a "box" that remembers and re-renders on change. We will go deeper on this box later.

The useState box

useState returns two things: the current value and a function to update it. We unpack them with destructuring.

Form: const [count, setCount] = useState(0). Here count is the value, setCount the updater, 0 the initial value.

The initial value is used on the first render; later renders give back the remembered value.

Exercise Counter skeleton

Complete the skeleton. Write a Counter component; import useState. Define const [count, setCount] = useState(0); and return <p>{count}</p>. Export it.

Show example solution

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);
  return <p>{count}</p>;
}

export default Counter;

Test yourself

Why is a plain let variable not enough for state?
```
useState keeps the value across renders.
```
- The syntax is wrong
- It is slow
- Each render resets it
- It throws a type error
Show answer

Each render resets it — A local variable restarts on each render; React does not see the change.

What is state: fill in the missing part

const [count, ____] = useState(0);

Show answer

const [count, setCount] = useState(0);

What is state: match the terms

count

Current value
setCount

Updater
useState

Hook
0

Initial value

Next lesson: The useState call

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies