State & useState

Giving components memory - how useState works, the rules of hooks, and updating state correctly (including the stale closure trap).

What it is, in plain English: State is data that a component remembers between renders and can change over time. useState is the React Hook that adds state to a function component. Calling the setter function (returned by useState) tells React the data changed, which triggers a re-render with the new value. Unlike props (which come from a parent), state is owned and managed by the component itself.

Giving a component memory

Props let data flow INTO a component, but a component can't change its own props. When a component needs to remember something and change it over time — a counter, form input, toggle — it needs state.

useState — the basic pattern

function Counter() {
  // useState(0) — 0 is the initial value
  // Returns an array: [currentValue, functionToUpdateIt]
  const [count, setCount] = React.useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

// Every time setCount is called:
// 1. React updates the stored value
// 2. The component function runs AGAIN (re-render)
// 3. The new 'count' value appears in the new JSX
// 4. React updates only the changed part of the real DOM

State can be any type

const [name, setName]       = React.useState("");        // string
const [isOpen, setIsOpen]   = React.useState(false);      // boolean
const [items, setItems]     = React.useState([]);         // array
const [user, setUser]       = React.useState(null);       // object or null

function Toggle() {
  const [isOn, setIsOn] = React.useState(false);
  return (
    <button onClick={() => setIsOn(!isOn)}>
      {isOn ? "ON" : "OFF"}
    </button>
  );
}

The Rules of Hooks

Hooks must be called the same way, every render. Never call useState (or any hook) inside a loop, condition, or nested function. This is non-negotiable — React relies on hooks being called in the exact same order every time.

// ✗ WRONG — conditional hook call:
function Bad({ condition }) {
  if (condition) {
    const [x, setX] = React.useState(0);  // breaks the rules!
  }
}

// ✓ RIGHT — always call the hook, use the condition inside:
function Good({ condition }) {
  const [x, setX] = React.useState(0);
  if (condition) {
    // use x here
  }
}

Try It Yourself (JSX)

// useState -- giving a component memory across renders

function Counter() {
  const [count, setCount] = React.useState(0);

return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
      <button onClick={() => setCount(count - 1)}>-1</button>
      <button onClick={() => setCount(0)}>Reset</button>
    </div>
  );
}

function LoginForm() {
  const [email, setEmail] = React.useState("");
  const [submitted, setSubmitted] = React.useState(false);

const handleSubmit = (e) => {
    e.preventDefault();
    setSubmitted(true);
  };

if (submitted) {
    return <p>Thanks, {email}! We'll be in touch.</p>;
  }

return (
    <form onSubmit={handleSubmit}>
      <input
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        placeholder="your@email.com"
      />
      <button type="submit">Submit</button>
    </form>
  );
}

function SafeCounter() {
  const [count, setCount] = React.useState(0);

const incrementTwice = () => {
    // WRONG -- both calls see the same 'count' from this render (closure issue):
    // setCount(count + 1);
    // setCount(count + 1);
    // Result: count only goes up by 1, not 2!

// RIGHT -- functional update always gets the LATEST value:
    setCount(c => c + 1);
    setCount(c => c + 1);
  };

return <button onClick={incrementTwice}>Count: {count} (click adds 2)</button>;
}

function App() {
  return (
    <div>
      <Counter />
      <LoginForm />
      <SafeCounter />
    </div>
  );
}

Functional updates and the stale closure trap

The stale closure problem

function BuggyCounter() {
  const [count, setCount] = React.useState(0);

  const handleTripleClick = () => {
    setCount(count + 1);  // uses 'count' from THIS render's closure
    setCount(count + 1);  // still the SAME 'count' — closures don't auto-update
    setCount(count + 1);  // result: count only increases by 1, not 3!
  };

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

The fix — functional updates

function FixedCounter() {
  const [count, setCount] = React.useState(0);

  const handleTripleClick = () => {
    // Pass a FUNCTION instead of a value — React guarantees it receives
    // the latest state, even across multiple calls in the same event:
    setCount(c => c + 1);
    setCount(c => c + 1);
    setCount(c => c + 1);
    // Result: count correctly increases by 3
  };

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

// Rule of thumb: if the new state depends on the OLD state, use the functional form.

Updating object and array state correctly

// State is replaced, not mutated. Always create a NEW object/array:
function UserForm() {
  const [user, setUser] = React.useState({ name: "", email: "" });

  const updateName = (newName) => {
    // ✗ WRONG — mutating directly doesn't trigger a re-render:
    // user.name = newName; setUser(user);

    // ✓ RIGHT — spread to create a new object:
    setUser({ ...user, name: newName });
  };

  return <input value={user.name} onChange={(e) => updateName(e.target.value)} />;
}

function TodoApp() {
  const [todos, setTodos] = React.useState([]);

  const addTodo = (text) => {
    setTodos([...todos, { id: Date.now(), text, done: false }]);  // new array
  };

  const toggleTodo = (id) => {
    setTodos(todos.map(t =>             // new array, with one item replaced
      t.id === id ? { ...t, done: !t.done } : t
    ));
  };
}

Lazy initial state — for expensive computations

// If computing the initial value is expensive, pass a FUNCTION, not the value:
function ExpensiveInit() {
  // ✗ runs on EVERY render, even though the result is only used once:
  // const [data, setData] = React.useState(expensiveComputation());

  // ✓ only runs ONCE, on mount:
  const [data, setData] = React.useState(() => expensiveComputation());
}

Batching, useState internals, and the Fiber state queue

// React 18 automatically batches ALL state updates (even in timeouts, promises):
function handleClick() {
  setCount(c => c + 1);
  setFlag(f => !f);
  // React 18: only ONE re-render happens, after both updates are applied
  // React 17 (in event handlers): also batched
  // React 17 (in async callbacks like setTimeout): NOT batched — 2 separate re-renders
}

// Force a synchronous (unbatched) update if truly needed (rare):
import { flushSync } from "react-dom";
function handleClick() {
  flushSync(() => setCount(c => c + 1));
  // DOM is updated immediately here, before the next line runs
  console.log(document.getElementById("count").textContent);  // reflects the new value
}

How useState is implemented internally

Each Fiber (component instance) has a linked list of "hook" objects in call order. useState creates a hook node holding the current state value and an update queue. When you call the setter, React doesn't immediately mutate state — it pushes an update object onto that hook's queue and schedules a re-render. During the next render, React processes the queue (applying functional updates in order) to compute the final state value before your component function runs. This is why hook call order must never change between renders — React matches hooks to their state purely by position in the list, not by name.

Official Sources

The Codex links only to official documentation. No third-party tutorials.