React: useState sem mistério

Como guardar e atualizar estado em componentes funcionais. O hook mais usado.

useState é o hook que adiciona estado a um componente React. Ele retorna o valor atual e uma função para atualizá-lo.

Contador simples

Contador.tsx

import { useState } from "react";

export function Contador() {
  const [contagem, setContagem] = useState(0);

  return (
    <button onClick={() => setContagem(contagem + 1)}>
      Clicou {contagem} vezes
    </button>
  );
}

Atualizações baseadas no valor anterior

Quando o novo estado depende do anterior, use a forma com callback para evitar bugs com atualizações em lote.

tsx

// ❌ pode usar valor defasado
setContagem(contagem + 1);

// ✅ recebe o estado mais recente
setContagem(prev => prev + 1);

useState dispara re-render quando o novo valor é diferente do atual. Para objetos, sempre retorne um novo objeto — nunca mute diretamente.

todos os tutoriais

Continue aprendendo

🔄

useEffect: o guia prático

9 min