Hook useState no React: exemplos e erros comuns

useState é o hook que permite a um componente lembrar de algo entre renderizações: uma contagem, o texto de um input, se um menu está aberto. Toda vez que você chama o setter dele, o React renderiza o componente de novo com o novo valor.

import { useState } from 'react';

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

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

Clique no botão e depois troque useState(0) por useState(10) no editor. A prévia é reconstruída e a contagem começa em 10.

A sintaxe

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

• initialValue é usado somente na primeira renderização. Em todas as renderizações seguintes o React o ignora e devolve o valor que guardou.
• value é o valor atual para esta renderização.
• setValue substitui o valor e agenda uma nova renderização.

Os nomes são seus. useState retorna um array de dois itens e os colchetes o desempacotam, então [isOpen, setIsOpen] e [email, setEmail] são o mesmo padrão.

Chame useState no nível superior do seu componente, nunca dentro de um loop, de uma condição ou de uma função aninhada. O React associa cada chamada ao seu valor guardado pela ordem das chamadas, então essa ordem precisa ser a mesma em toda renderização (veja as regras dos hooks).

Várias partes de estado

Um componente pode chamar useState quantas vezes precisar. Cada chamada é um valor próprio e independente.

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>
    );
}

O estado é uma foto

O setter não muda a variável que está nas suas mãos. Ele diz ao React qual deve ser o valor na próxima renderização. Até essa renderização acontecer, a atual continua vendo o valor antigo.

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>;
}

Abra o console abaixo da prévia e clique uma vez. O handler registra 0, o valor antigo, e depois o componente registra uma nova renderização com 1. Não há nada de errado: count é uma constante durante toda a renderização, e a próxima renderização recebe uma nova.

Funções de atualização

Por causa da foto, chamar o setter três vezes com count + 1 soma um, não três: cada chamada calcula 0 + 1. Passe uma função em vez disso e o React entrega a cada chamada o resultado da anterior.

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 a forma com função de atualização sempre que o próximo valor depender do anterior e a atualização puder não partir direto da renderização mais recente: vários sets em um handler, um callback de setInterval ou um efeito.

Objetos e arrays no estado

O React decide se renderiza de novo comparando o valor antigo e o novo com Object.is. Se você altera um objeto no lugar e passa o mesmo objeto de volta, a comparação diz que nada mudou e a tela fica como estava. Sempre passe um novo objeto ou 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 } copia todos os campos e sobrescreve um. [...tags, 'code'] adiciona um item, e filter remove um, os dois retornando um novo array. A página sobre atualizar arrays e objetos trata de objetos aninhados, de editar um item de uma lista e de inserir no meio.

Estado inicial preguiçoso

O argumento de useState é avaliado em toda renderização, mesmo que o React só o use na primeira vez. Quando calculá-lo é caro (ler o localStorage, analisar uma string grande), passe uma função. O React a chama uma vez, na primeira renderização.

// 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());

Reiniciar o estado com uma key

O estado pertence à posição de um componente na árvore. Se você renderiza uma key diferente no mesmo lugar, o React trata como um novo componente e o estado dele recomeça. Essa é a forma mais limpa de reiniciar um formulário quando aquilo que ele edita muda.

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>
    );
}

Digite uma mensagem e depois troque o destinatário: o rascunho é apagado. Remova key={to} e tente de novo, e o texto continua, porque agora o React vê o mesmo Draft no mesmo lugar.

Erros comuns

Registrar o estado logo depois de defini-lo. Você vê o valor antigo, como mostrado acima. Registre no corpo do componente, ou calcule primeiro o próximo valor em uma variável e use essa variável.

Mutar o estado. user.age++; setUser(user) passa o mesmo objeto, então nada é renderizado. Copie primeiro.

Chamar o setter durante a renderização. <button onClick={setCount(count + 1)}> chama setCount durante a renderização, o que renderiza de novo, o que chama de novo. O React interrompe esse loop com "Too many re-renders". Passe uma função: onClick={() => setCount(count + 1)}.

Guardar valores que você pode calcular. Se fullName é sempre first + ' ' + last, calcule durante a renderização em vez de manter uma terceira parte de estado que pode ficar dessincronizada.