State

Give a component memory with useState so the screen updates when data changes.

Lesson 4 of 120% of the track complete

What you'll learn

How useState stores a value that can change, and how updating it re-renders the component.

Why it matters

Counters, form inputs, toggles and menus all have data that changes over time. State is how React remembers it and updates the screen for you.

Explanation

A normal variable inside a component is reset every time the component runs. State is a value React remembers between renders.

You create it with the useState hook:

count is the current value (starts at 0).
setCount is the function that changes it.

When you call setCount(newValue), React updates the value and re-runs the component, so the screen shows the new number.

Never change state directly (count = count + 1 does nothing useful). Always use the setter.

Example

Step-by-step walkthrough

useState(0) starts count at 0. React remembers it across renders.
The heading shows the current value.
Clicking "Add one" calls setCount(count + 1), which stores 1 and re-renders.
The heading now reads Count: 1. Each click adds one more.
"Reset" sets it back to 0.

The runner on this page makes useState, useEffect and the other hooks available for you.

Try it yourself

Add a "Subtract one" button, and stop the count from going below zero.

useState counterReact

Ctrl+Enter to run

Common mistakes

Changing state directly: count = count + 1 does not re-render.
Calling the setter during render, which causes an infinite loop. Call it inside event handlers.
Calling hooks inside conditions or loops. Hooks must run in the same order every render.
Expecting the new value immediately after calling the setter inside the same function.

Quick quiz

Question 1 of 3

What does useState(0) return?

The current value and a setter functionOnly the number 0A new component

Question 2 of 3

What happens after you call setCount(5)?

Nothing, it is ignoredReact stores 5 and re-renders the componentThe page reloads

Question 3 of 3

Why not write count = count + 1?

React will not notice the change and will not re-renderIt is a syntax errorIt makes count a string

Summary

useState gives a component memory.
Use the setter function to change it; React re-renders.
Call hooks at the top level of a component.

Next: events and handling user input.

React (JSX)

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

  return (
    <div style={{ fontFamily: "system-ui" }}>
      <h2>Count: {count}</h2>
      <button onClick={() => setCount(count + 1)}>Add one</button>
      <button onClick={() => setCount(0)}>Reset</button>
    </div>
  );
}