useState: remembering values

Everything so far has been static — components render data but nothing changes. State is how components remember and change data over time, making them interactive. The useState hook is React's core tool for state. This lesson is a turning point: your components come alive.

What state is, and useState

Click the button — the count goes up, and the display updates. That's state. useState(0) creates a piece of state starting at 0, and returns two things:

• count — the current value.
• setCount — a function to change it.

When you call setCount(count + 1), React updates the state and re-renders the component with the new value. State is data that changes over time, and changing it re-renders the UI. This is the heart of interactivity.

The useState pattern

The pattern is always: const [value, setValue] = useState(initialValue). You name the value and its setter (convention: x and setX). useState(false) here starts isOn at false; clicking flips it with setIsOn(!isOn), re-rendering to show ON/OFF. (In real code you'd write const { useState } = React at the top, then useState(...) — here we use React.useState directly.) This name-a-value-and-setter pattern is how you add any changing data.

State can be any type

State can hold any type — strings, numbers, booleans, arrays, objects. A component can have several pieces of state (name, age), each with its own useState. Each is independent; changing one re-renders with the updated values. This lets a component track multiple changing things.

Why not a normal variable?

Why not just use a normal variable? Because changing a normal variable doesn't re-render the component — the UI won't update (click above; the console changes but the display doesn't). Also, a normal variable resets to its initial value on every render. State is special: it persists across renders, and changing it triggers a re-render. That's exactly what UI needs, and why useState exists.

The mistake beginners make

Using a normal variable for changing data (the UI won't update, and it resets each render) — use useState for anything that changes and affects the UI. Also, modifying the state value directly (count = count + 1 or count++) instead of calling the setter (setCount(count + 1)) — you must use the setter for React to notice and re-render. And forgetting the setter re-renders (so the new value appears). Use useState for changing UI data, and always update it via its setter function.

Your turn

Your turn

1. Add state with const [value, setValue] = React.useState(initialValue).
2. Read the value in your JSX, and change it by calling the setter (which re-renders).
3. Understand why state (not a normal variable) is needed: it persists across renders and triggers re-renders.

Key points

• State is data that changes over time and, when changed, re-renders the component — the basis of interactivity.
• useState(initial) returns [value, setValue]: the current value and a setter function to change it.
• Always change state via its setter (setCount(...)), not by modifying the value directly — the setter triggers the re-render.
• Normal variables don't work for UI (no re-render, and they reset each render); state persists and updates the UI.