useState Hook de estado
Última atualização: 2026-11-03
useState Hook de estado
O useState adiciona uma variável de estado a um componente de função: ele devolve o valor atual e uma função de atualização, e qualquer mudança re-renderiza o componente. Todos os dados de UI dirigidos por interação — inputs, alternadores, contadores — são gerenciados por ele.
| Grupo | Renderização e Estado |
|---|---|
| Tipo | Hook |
| Desde | React 16.8 |
ℹ️ Informação O editor transpila JSX para JavaScript e renderiza a UI real na sandbox; os componentes são montados automaticamente — sem render manual.
📝 Sintaxe
const [count, setCount] = useState(0)
// ↑ atual ↑ setter ↑ valor inicial (apenas na primeira renderização)⚙️ Parâmetros
| initialState | Estado inicial. Usado como valor atual apenas na primeira renderização; ignorado depois. |
|---|---|
| setCount (setter) | A função de atualização: passe um novo valor ou uma função que recebe o valor anterior; chamá-la agenda uma re-renderização. |
Retorna：Devolve um array de dois elementos: [valor atual, setter]. Normalmente é desestruturado com nomes próprios; por convenção, os setters começam com "set".
▶ Exemplo
O exemplo roda direto: renderiza automaticamente ao expandir e edições valem na hora.
Saída：
Um título centralizado "Current count: 0" com três botões. O +1 incrementa, o -1 decrementa e o Reset volta para 0.💡 Pontos-chave
💡 Dica Nomeie os setters com o prefixo set (setCount / setOpen) para que a intenção fique evidente à primeira vista.
⚠️ Aviso Alterar a variável de estado direto (count = 5) NÃO re-renderiza — chame sempre o setter.
ℹ️ Informação O valor inicial vale apenas para a primeira renderização; mudar essa expressão depois nunca reseta o estado.
🏷️ Mais Renderização e Estado
💡 Casos Relacionados
Mais casos em breve.
📚 Tutoriais Relacionados
❓ Perguntas Frequentes
P Por que imprimir o estado logo depois da mudança ainda mostra o valor antigo?
R O setCount agenda a próxima renderização; ele não atribui na hora. O count no closure atual continua desatualizado — calcule a partir do valor anterior dentro da função de atualização.
P O valor inicial do useState pode ser uma função?
R Pode. Passar uma função significa inicialização preguiçosa — chamada uma única vez na primeira renderização, ideal quando o valor inicial é caro de calcular.
P Um componente pode usar o useState mais de uma vez?
R Pode — e é recomendado: separe as preocupações em estados distintos em vez de um objeto grande só.
