React useState Hook: The Complete Beginner Guide (2026)

Quick answer: useState is the React hook that gives a component memory. Call const [count, setCount] = useState(0) and your component now holds a value that survives re-renders; calling setCount updates it and re-renders the screen. That single pattern powers counters, forms, toggles, tabs and modals. This guide shows the pattern, the update rules that trip people up, and the three classic bugs with fixes.

The pattern: value + setter

A working counter, the “hello world” of state:

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

The array destructure names two things: the current value and the function that changes it. useState(0) — the argument is the initial value. Every setter call schedules a re-render, and React replaces the whole component output with the new values. That render-swap is the core mental model of React interactivity.

State update rules that matter

Rule	Wrong	Right
Never mutate directly	count = 5 or user.name = 'X'	Always call the setter: setCount(5)
New state from old state	setCount(count + 1) twice in a row (stale read)	Updater form: setCount(c => c + 1)
Objects/arrays are replaced whole	user.age = 21	setUser({ ...user, age: 21 })
Setters are async-ish	Reading the variable right after setting	Use the updater form or read it in the next render

The updater form setCount(c => c + 1) receives the latest value even if two updates happen in one event handler — the direct form reads a stale snapshot. This is the single most common React bug interview question, and now you know it.

Worked example: an input form with state

function SignupForm() {
  const [form, setForm] = useState({ name: '', email: '' });

  function update(field) {
    return (e) => setForm({ ...form, [field]: e.target.value });
  }

  return (
    <form>
      <input value={form.name} onChange={update('name')} placeholder="Name" />
      <input value={form.email} onChange={update('email')} placeholder="Email" />
      <p>Hello {form.name || 'stranger'}, is {form.email} right?</p>
    </form>
  );
}

One state object for the whole form keeps handlers small: spread the old object, override one field. The live preview paragraph re-renders on every keystroke — you get “controlled input” behavior with two lines per field. Events in detail come next in the series: events and forms, the full guide.

The three classic state bugs

• The invisible update: you mutated an object instead of calling the setter. React compares references — same reference, no re-render. Fix: always produce a new object/array.
• The stale increment: two setCount(count + 1) calls add up to +1 total. Fix: updater form setCount(c => c + 1).
• The lost state: a component’s state resets unexpectedly — usually its key or position in the tree changed. Keys matter so much they get their own guide: lists and keys.

If you want an instructor to review how you structure state before bad habits set in, Ampersand Academy teaches React one-to-one with your own project as the material.

Frequently asked questions