useState

useState is the hook you will reach for most in React. It lets a function component remember a value between renders and trigger a re-render when that value changes. Getting comfortable with its quirks — especially the async update model — prevents a whole class of subtle bugs.

Basic Syntax

import { useState } from "react";

function Toggle() {
  const [isOn, setIsOn] = useState(false);

  return (
    <button onClick={() => setIsOn(!isOn)}>
      {isOn ? "On" : "Off"}
    </button>
  );
}

useState returns a tuple: the current value and a setter function. The argument to useState is the initial value, used only on the first render. Destructuring with array destructuring ([value, setValue]) lets you name the pair anything you want.

State Updates Are Asynchronous

Calling setState does not update the variable immediately. React schedules a re-render and the new value is only visible on the next render cycle.

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

  function handleClick() {
    setCount(count + 1);
    console.log(count); // Still logs the OLD value — the update hasn't applied yet
  }

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

// Bug: only increments by 1, not 3
function brokenTripleIncrement(count: number, setCount: (n: number) => void) {
  setCount(count + 1);
  setCount(count + 1);
  setCount(count + 1);
}

Functional Updates

When the new state depends on the previous state, always use the functional update form: pass a function to the setter instead of a value.

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

  function tripleIncrement() {
    setCount(prev => prev + 1);
    setCount(prev => prev + 1);
    setCount(prev => prev + 1); // Correctly increments by 3
  }

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

React queues these functions and calls them in order, passing the latest value to each. This is also important in event handlers called inside setInterval or async code, where captured count values go stale.

Multiple State Variables

You can call useState multiple times. Each call is independent.

function SignupForm() {
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [agreed, setAgreed] = useState(false);

  return (
    <form>
      <input value={name} onChange={e => setName(e.target.value)} />
      <input value={email} onChange={e => setEmail(e.target.value)} />
      <input type="checkbox" checked={agreed} onChange={e => setAgreed(e.target.checked)} />
    </form>
  );
}

Lazy Initial State

If computing the initial value is expensive, pass a function instead of a value. React calls it only on the first render.

function ExpensiveInit() {
  // Without lazy init: runs on every render (but only the first result is used)
  const [data, setData] = useState(computeExpensiveDefault());

  // With lazy init: runs only once
  const [data2, setData2] = useState(() => computeExpensiveDefault());
}

When NOT to Use State

Not every value needs to be state. Overusing useState leads to components that are hard to reason about.

Further Learning

Search these terms to go deeper:

• “useState react.dev hooks reference” — the complete API reference with edge cases
• “Kent C. Dodds useState vs useRef” — when to use each and why the distinction matters
• “React state batching React 18” — how React 18 changed the automatic batching of state updates
• “stale closure problem React hooks” — the deeper explanation of why functional updates are necessary
• “Josh W. Comeau understanding useMemo” — covers state fundamentals as a prerequisite

useState

useState is the tool you’ll use most in React. It gives a component a piece of memory that survives between re-draws, and it tells React to re-draw whenever that memory changes.

The basic shape

import { useState } from 'react'

function Toggle() {
  const [isOn, setIsOn] = useState(false)  // start off

  return (
    <button onClick={() => setIsOn(!isOn)}>
      {isOn ? 'On' : 'Off'}
    </button>
  )
}

useState(false) gives you back two things:

• isOn — the current value.
• setIsOn — a function to change it.

The value you pass (false) is just the starting value. You can name the pair anything ([count, setCount], etc.).

Updating doesn’t happen instantly

When you call the setter, React doesn’t change the value on the spot — it schedules a re-draw and the new value shows up next time:

function handleClick() {
  setCount(count + 1)
  console.log(count)  // still the OLD value here!
}

This surprises everyone at first. Just remember: after you call the setter, count in the current run is still the old number.

Updating based on the previous value

If your new value depends on the old one — especially if you update more than once — use the function form, which hands you the latest value:

// ❌ only adds 1 (all three see the same old count)
setCount(count + 1)
setCount(count + 1)

// ✅ adds 2 (each gets the up-to-date value)
setCount(prev => prev + 1)
setCount(prev => prev + 1)

Rule of thumb: if the next value depends on the previous one, use setCount(prev => ...).

As many pieces as you need

Just call useState again for each separate piece of data:

const [name, setName] = useState('')
const [email, setEmail] = useState('')
const [agreed, setAgreed] = useState(false)

Not everything needs to be state

If a value can be calculated from what you already have, don’t make it state — just compute it:

const isValid = email.includes('@')  // plain variable, not state

In one sentence

useState(initial) gives you [value, setValue]; calling setValue schedules a re-draw (the value updates next render, not immediately), and you use setValue(prev => ...) when the new value depends on the old one.

Want to go deeper?

Switch to Expert mode above for state batching, lazy initial state, grouping state into objects, and useState vs useRef.