React useState Hook: Examples and Common Mistakes

useState is the hook that lets a component remember something between renders: a count, the text in an input, whether a menu is open. Every time you call its setter, React renders the component again with the new value.

import { useState } from 'react';

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

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

Click the button, then change useState(0) to useState(10) in the editor. The preview rebuilds and the count starts from 10.

The syntax

const [value, setValue] = useState(initialValue);

• initialValue is used on the first render only. On every later render React ignores it and hands back the value it stored.
• value is the current value for this render.
• setValue replaces the value and schedules a new render.

The names are yours. useState returns a two-item array and the square brackets unpack it, so [isOpen, setIsOpen] and [email, setEmail] are the same pattern.

Call useState at the top level of your component, never inside a loop, a condition or a nested function. React matches each call to its stored value by the order of the calls, so that order must be the same on every render (see the rules of hooks).

Several pieces of state

A component can call useState as many times as it needs. Each call is its own independent value.

import { useState } from 'react';

export default function App() {
    const [name, setName] = useState('');
    const [likesReact, setLikesReact] = useState(true);

    return (
        <div>
            <input
                value={name}
                onChange={(e) => setName(e.target.value)}
                placeholder="Your name"
            />
            <label style={{ display: 'block', marginTop: 8 }}>
                <input
                    type="checkbox"
                    checked={likesReact}
                    onChange={(e) => setLikesReact(e.target.checked)}
                />
                I like React
            </label>
            <p>
                {name || 'Someone'} {likesReact ? 'likes' : 'does not like'} React.
            </p>
        </div>
    );
}

State is a snapshot

The setter does not change the variable in your hands. It tells React what the value should be in the next render. Until that render happens, the current one keeps seeing the old value.

import { useState } from 'react';

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

    function handleClick() {
        setCount(count + 1);
        console.log('count right after setCount:', count);
    }

    console.log('render with count =', count);

    return <button onClick={handleClick}>Add one ({count})</button>;
}

Open the console under the preview and click once. The handler logs 0, the old value, and then the component logs a new render with 1. Nothing is wrong: count is a constant for the whole render, and the next render gets a fresh one.

Updater functions

Because of the snapshot, calling the setter three times with count + 1 adds one, not three: every call computes 0 + 1. Pass a function instead and React feeds each call the result of the previous one.

import { useState } from 'react';

export default function App() {
    const [a, setA] = useState(0);
    const [b, setB] = useState(0);

    function addThreeWrong() {
        setA(a + 1);
        setA(a + 1);
        setA(a + 1);
    }

    function addThreeRight() {
        setB((n) => n + 1);
        setB((n) => n + 1);
        setB((n) => n + 1);
    }

    return (
        <div>
            <p>
                <button onClick={addThreeWrong}>a + 1 three times</button> a = {a}
            </p>
            <p>
                <button onClick={addThreeRight}>n =&gt; n + 1 three times</button> b = {b}
            </p>
        </div>
    );
}

Use the updater form whenever the next value depends on the previous one and the update might not run straight from the latest render: several sets in one handler, a setInterval callback, or an effect.

Objects and arrays in state

React decides whether to render again by comparing the old and new value with Object.is. If you change an object in place and pass the same object back, the comparison says nothing changed and the screen stays as it was. Always pass a new object or array.

import { useState } from 'react';

export default function App() {
    const [user, setUser] = useState({ name: 'Ada', age: 36 });
    const [tags, setTags] = useState(['math']);

    return (
        <div>
            <p>
                {user.name}, {user.age}
            </p>
            <button onClick={() => setUser({ ...user, age: user.age + 1 })}>
                Birthday
            </button>

            <p>Tags: {tags.join(', ')}</p>
            <button onClick={() => setTags([...tags, 'code'])}>Add tag</button>
            <button onClick={() => setTags(tags.filter((t) => t !== 'math'))}>
                Remove math
            </button>
        </div>
    );
}

{ ...user, age: user.age + 1 } copies every field and overrides one. [...tags, 'code'] adds an item, and filter removes one, both returning a new array. The page on updating arrays and objects covers nested objects, editing one item in a list and inserting in the middle.

Lazy initial state

The argument to useState is evaluated on every render, even though React only uses it the first time. When computing it is expensive (reading localStorage, parsing a big string), pass a function. React calls it once, on the first render.

// Runs readSavedNotes() on every render, then throws the result away
const [notes, setNotes] = useState(readSavedNotes());

// Runs it once
const [notes, setNotes] = useState(readSavedNotes);
const [notes, setNotes] = useState(() => readSavedNotes());

Resetting state with a key

State belongs to a component's position in the tree. If you render a different key in the same place, React treats it as a new component and its state starts over. This is the cleanest way to reset a form when the thing it edits changes.

import { useState } from 'react';

function Draft({ to }) {
    const [text, setText] = useState('');
    return (
        <textarea
            value={text}
            onChange={(e) => setText(e.target.value)}
            placeholder={`Message to ${to}`}
            rows={3}
        />
    );
}

export default function App() {
    const [to, setTo] = useState('Ada');
    return (
        <div>
            <select value={to} onChange={(e) => setTo(e.target.value)}>
                <option>Ada</option>
                <option>Linus</option>
            </select>
            <div style={{ marginTop: 8 }}>
                <Draft key={to} to={to} />
            </div>
        </div>
    );
}

Type a message, then switch the recipient: the draft clears. Delete key={to} and try again, and the text stays, because React now sees the same Draft in the same place.

Common mistakes

Logging state right after setting it. You see the old value, as shown above. Log in the component body, or compute the next value into a variable first and use that.

Mutating state. user.age++; setUser(user) passes the same object, so nothing renders. Copy first.

Calling the setter during render. <button onClick={setCount(count + 1)}> calls setCount while rendering, which renders again, which calls it again. React stops this loop with "Too many re-renders". Pass a function: onClick={() => setCount(count + 1)}.

Storing values you can compute. If fullName is always first + ' ' + last, compute it during render instead of keeping a third piece of state that can fall out of sync.