State with useState

Props come from outside a component. State is data a component owns and remembers between renders — a counter, the text in an input, whether a menu is open, the items in a cart. When state changes, React re-renders the component to show the new value. useState is the hook that makes this happen, and understanding how it works is the key to React.

Why regular variables don't work#

function BrokenCounter() {
  let count = 0;

  function handleClick() {
    count = count + 1; // changes the variable…
    console.log(count);
  }

  return <button onClick={handleClick}>Clicked {count} times</button>; // …but the screen never updates
}

Two problems: changing a local variable doesn't tell React to re-render, and even if it did re-render, let count = 0 would run again and reset it. We need a value that persists between renders and triggers a re-render when it changes.

useState#

import { useState } from "react";

export default function Counter() {
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount(count + 1)}>
      Clicked {count} times
    </button>
  );
}

• useState(0) declares a state variable with initial value 0.
• It returns a pair: the current value and a setter function. Name them [something, setSomething].
• Calling setCount(newValue) stores the new value and schedules a re-render. On the next render, useState returns the updated value.

A component can have as many state variables as it needs:

function Profile() {
  const [name, setName] = useState("Ada");
  const [isEditing, setIsEditing] = useState(false);
  const [likes, setLikes] = useState(0);
  // ...
}

Rules of Hooks

Functions starting with use are hooks. Two rules:

1. Call hooks only at the top level of a component (or custom hook) — never inside if, loops or nested functions.
2. Call hooks only from React components or custom hooks, not regular functions.

React identifies each state variable by its call order, so the order must be the same on every render. The linter's hooks rule catches violations.

How a re-render works#

When you click the button:

1. setCount(1) tells React "next time, count is 1" and queues a render.
2. React calls Counter() again. This time useState(0) returns [1, setCount] (the initial value is ignored after the first render).
3. The new JSX says "Clicked 1 times", so React updates that text in the DOM.

Each render is like a snapshot: the props, state and handlers belong to that render.

State is a snapshot#

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

  function handleClick() {
    setCount(count + 1);
    console.log(count); // still 0! – this render's snapshot
    setCount(count + 1); // 0 + 1 again
    setCount(count + 1); // and again → count becomes 1, not 3
  }

  return <button onClick={handleClick}>{count}</button>;
}

Setting state doesn't change the variable in the code that's already running — it requests a new render with a new value. React also batches all updates from one event into a single re-render.

Updater functions

When the next value depends on the previous one, pass a function to the setter. React queues it and gives it the latest pending value:

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

  function addThree() {
    setCount((c) => c + 1);
    setCount((c) => c + 1);
    setCount((c) => c + 1); // count goes up by 3
  }

  return <button onClick={addThree}>{count} (+3)</button>;
}

setCount(count + 1) means "set it to 1"; setCount(c => c + 1) means "add one to whatever it is". Use the updater form whenever you compute from the previous state — it's also safer with timers and async code.

Lazy initial state#

If the initial value is expensive to compute, pass a function — React only calls it on the first render:

function Notes() {
  // ✅ reads localStorage once, not on every render
  const [notes, setNotes] = useState(() => JSON.parse(localStorage.getItem("notes") ?? "[]"));
  return <p>{notes.length} notes</p>;
}

Objects in state: replace, don't mutate#

React decides whether to re-render by comparing the old and new value with Object.is — for objects and arrays, that's a reference check. Mutating an object keeps the same reference, so React may skip the update. Always create a new object:

function ProfileForm() {
  const [person, setPerson] = useState({ name: "Ada", email: "ada@example.com", age: 36 });

  function handleChange(e) {
    // ❌ person.name = e.target.value; setPerson(person);
    setPerson({ ...person, [e.target.name]: e.target.value }); // ✅ new object
  }

  return (
    <form>
      <input name="name" value={person.name} onChange={handleChange} />
      <input name="email" value={person.email} onChange={handleChange} />
      <p>
        {person.name} &lt;{person.email}&gt;, {person.age}
      </p>
    </form>
  );
}

Spread copies the existing fields, then the computed key [e.target.name] overrides one of them. For nested objects, copy each level you change:

setUser((u) => ({ ...u, address: { ...u.address, city: "Pune" } }));

Arrays in state: use non-mutating methods#

A complete todo list:

import { useState } from "react";

export default function TodoApp() {
  const [todos, setTodos] = useState([
    { id: 1, text: "Learn useState", done: true },
    { id: 2, text: "Build a todo app", done: false },
  ]);
  const [text, setText] = useState("");

  function addTodo(e) {
    e.preventDefault();
    const trimmed = text.trim();
    if (!trimmed) return;
    setTodos([...todos, { id: crypto.randomUUID(), text: trimmed, done: false }]);
    setText("");
  }

  function toggle(id) {
    setTodos(todos.map((t) => (t.id === id ? { ...t, done: !t.done } : t)));
  }

  function remove(id) {
    setTodos(todos.filter((t) => t.id !== id));
  }

  const remaining = todos.filter((t) => !t.done).length;

  return (
    <section>
      <form onSubmit={addTodo}>
        <input value={text} onChange={(e) => setText(e.target.value)} placeholder="What needs doing?" />
        <button type="submit">Add</button>
      </form>
      <ul>
        {todos.map((t) => (
          <li key={t.id}>
            <label>
              <input type="checkbox" checked={t.done} onChange={() => toggle(t.id)} />
              {t.done ? <s>{t.text}</s> : t.text}
            </label>
            <button type="button" onClick={() => remove(t.id)} aria-label={`Delete ${t.text}`}>
              ✕
            </button>
          </li>
        ))}
      </ul>
      <p>{remaining} left to do</p>
    </section>
  );
}

Notice remaining isn't state — it's derived from todos during render. Don't store values you can calculate.

State is local and private#

Each instance of a component has its own state:

function App() {
  return (
    <>
      <Counter /> {/* independent count */}
      <Counter /> {/* independent count */}
    </>
  );
}

Clicking one counter doesn't affect the other. When two components need to share state, move it up to their common parent and pass it down as props — "lifting state up", covered in a later lesson.

React keeps state tied to the component's position in the tree. If a component is removed and later added back, its state starts fresh.

Choosing state well#

• Minimal: store the least you can; derive the rest (remaining, fullName, filteredItems).
• No duplicates: don't copy props into state unless you deliberately want to ignore later prop changes.
• Group related values that always change together ({ x, y }), but keep unrelated ones separate.
• Avoid contradictions: instead of isLoading and isError booleans, consider one status value: "idle" | "loading" | "error" | "success".

Common mistakes#

• Expecting the state variable to change right after calling the setter.
• Mutating objects or arrays and calling the setter with the same reference.
• Calling hooks conditionally.
• Storing derived values in state and having them fall out of sync.
• Calling a setter during render (setCount(count + 1) in the component body) — infinite loop.

What's next#

With state, your UI can change. Next, learn the patterns for showing different UI in different situations: conditional rendering.