useState do React js
Como funciona o useState do React JS? Guia completo com exemplos
Aprenda a guardar informações dentro de componentes React, atualizar a tela automaticamente e criar funcionalidades interativas com o hook useState, mesmo que você esteja começando agora.
O que você vai aprender:
- O que é estado no React.
- Como funciona o hook useState.
- O que significam estado, valor inicial e função de atualização.
- Como criar um contador e um campo de texto interativo.
- Como evitar os erros mais comuns.
1. O que é o useState do React?
O useState é um hook do React que permite guardar uma informação dentro de um componente e pedir ao React que atualize a tela quando essa informação mudar.
Mas vamos entender isso com calma.
Imagine que você está criando um botão de curtida. Quando a pessoa clica nele, o número de curtidas precisa aumentar. Se o número era 10, agora deve ser 11.
O React precisa de um lugar para guardar esse número e saber quando ele mudou. É justamente aí que entra o useState.
Imagine uma pequena caixa:
Dentro dela existe o número 10. Quando você aperta o botão, pede ao React para trocar o número para 11. O React guarda o novo valor e desenha novamente a parte da tela que precisa mudar.
Em outras palavras, o useState ajuda o componente a lembrar de informações entre uma renderização e outra.
Uma renderização acontece quando o React executa um componente para descobrir o que precisa aparecer na tela.
Definição para guardar: useState é um hook usado para manter um estado no componente e atualizar a interface quando esse estado é alterado.
2. O que é estado no React?
Antes de entender o código, precisamos conhecer a palavra estado.
Estado é uma informação que pode mudar durante o uso de um aplicativo.
Veja dois exemplos simples:
Exemplo A: contador
O contador começa em zero. Cada clique aumenta o número.
Estado inicial: 0
Depois de um clique: 1
Depois de dois cliques: 2
Exemplo B: campo de texto
Uma pessoa digita seu nome em um formulário. O texto muda a cada letra digitada.
Estado inicial: texto vazio.
Depois de digitar: Maria.
Nos dois casos, temos uma informação que muda durante o uso da página.
O estado pode guardar números, textos, valores verdadeiros ou falsos, listas e objetos. O tipo de informação depende daquilo que o componente precisa fazer.
Importante: nem toda variável precisa ser um estado. Se uma informação não precisa ser lembrada entre renderizações nem provocar uma atualização visual, uma variável comum pode ser suficiente.
3. Por que o useState é importante?
Uma página web pode ser apenas uma imagem parada, mas os aplicativos modernos precisam reagir às ações das pessoas.
Com o useState, você consegue criar funcionalidades como:
- Contadores e botões de curtida.
- Formulários que guardam o que foi digitado.
- Menus que abrem e fecham.
- Botões para mostrar ou esconder senhas.
- Listas de tarefas que podem ser marcadas como concluídas.
- Abas, filtros e controles de quantidade de produtos.
Sem um estado apropriado, fica muito mais difícil manter essas informações sincronizadas com a interface.
O problema de usar apenas uma variável comum
Veja este exemplo:
let contador = 0;
function aumentar() {
contador = contador + 1;
}Essa função consegue aumentar a variável. Porém, mudar uma variável comum não avisa automaticamente ao React que a interface precisa ser atualizada.
Além disso, quando o componente é renderizado novamente, essa variável pode ser criada outra vez com o valor inicial definido no código.
O useState resolve esse problema porque o React administra o estado e sabe quando uma atualização foi solicitada.
4. Entendendo a sintaxe do useState
Vamos conhecer a estrutura básica:
import { useState } from 'react';
const [valor, setValor] = useState(0);Essa linha pode parecer estranha no começo. Vamos dividir em partes pequenas.
Passo 1: importar o useState
import { useState } from 'react';Essa linha importa o useState da biblioteca React para que possamos utilizá-lo no componente.
Em projetos React modernos, você normalmente já tem o React instalado. Se o arquivo usa a sintaxe JSX com uma configuração moderna, geralmente não precisa importar React apenas para escrever JSX, mas precisa importar o useState quando for utilizá-lo.
Passo 2: entender o valor inicial
const [valor, setValor] = useState(0);O número 0 é o valor inicial. Ele informa ao React qual valor deve ser usado quando aquele estado for inicializado.
Se estivermos criando um contador, faz sentido começar em zero. Se estivermos criando um campo para digitar o nome de alguém, podemos começar com um texto vazio: ''.
Passo 3: entender valor e função de atualização
A chamada do useState devolve dois elementos em um array. A desestruturação usa os colchetes para colocar cada elemento em uma variável.
| Parte | Significado |
|---|---|
| valor | O valor atual do estado. |
| setValor | A função usada para pedir uma atualização do estado. |
| useState(0) | Inicializa o estado com o valor 0 na primeira renderização do componente. |
Os nomes valor e setValor foram escolhidos pelo programador. Você pode escolher outros nomes que façam sentido.
Por exemplo, para guardar a idade, você pode usar idade e setIdade.
const [idade, setIdade] = useState(18);Nesse caso, o estado começa com 18. A função setIdade poderá ser utilizada para solicitar a mudança da idade.
Dica: por convenção, o nome da função de atualização começa com set seguido do nome do estado. Isso facilita a leitura, mas o JavaScript não exige esses nomes específicos.
5. Como o useState funciona por trás dos panos?
Entender o que acontece por trás dos panos ajuda você a não depender apenas de decorar códigos.
Quando você pede ao React para atualizar um estado, o processo funciona, de forma simplificada, assim:
O componente é executado.
Na primeira renderização, o React inicializa o estado e fornece seu valor atual ao componente.
A pessoa realiza uma ação.
Por exemplo, clica em um botão para aumentar o contador.
A função de atualização é chamada.
O código chama setContador com o novo valor ou com uma função que calcula esse valor.
O React agenda uma nova renderização.
O React pode agrupar atualizações para trabalhar com mais eficiência. Por isso, a atualização nem sempre aparece imediatamente na linha seguinte do código.
A interface é atualizada.
O React executa novamente o componente, utiliza o estado atualizado e aplica as mudanças necessárias na tela.
O segredo: você não precisa alterar manualmente o texto da página. Você atualiza o estado, e o React cuida da atualização da interface.
O que acontece quando o componente renderiza novamente?
Imagine que o contador começou em zero. Depois de um clique, o estado passa a ser um. Quando o React executa o componente novamente, o useState fornece o valor atualizado, em vez de reiniciar o estado para zero.
Isso é diferente de uma variável local comum, que é criada novamente toda vez que o componente é executado.
O React também mantém a identidade do estado de acordo com a posição do componente na árvore de renderização e com as regras de identidade dos componentes. Por isso, desmontar um componente e montá-lo novamente pode fazer seu estado voltar ao valor inicial.
6. Primeiro exemplo prático: criando um contador
Vamos criar um contador que começa em zero e aumenta cada vez que o usuário clica em um botão.
Esse é um dos melhores exemplos para aprender useState porque mostra claramente a relação entre o estado e a interface.
Passo 1: criar o componente
Um componente é uma parte da interface que podemos criar e reutilizar. Em React, geralmente escrevemos componentes como funções que retornam JSX.
import { useState } from 'react';
function Contador() {
const [contador, setContador] = useState(0);
function aumentar() {
setContador(valorAtual => valorAtual + 1);
}
return (
<div>
<h2>Meu contador</h2>
<p>Valor: {contador}</p>
<button onClick={aumentar}>
Aumentar
</button>
</div>
);
}
export default Contador;Passo 2: entender o estado
const [contador, setContador] = useState(0);Aqui criamos um estado chamado contador.
O valor inicial é zero. A variável contador recebe o valor atual, e setContador é a função que usamos para solicitar uma atualização.
Passo 3: entender a função aumentar
function aumentar() {
setContador(valorAtual => valorAtual + 1);
}Essa função pede ao React para aumentar o contador em um.
A expressão valorAtual => valorAtual + 1 é uma função que recebe o valor anterior e devolve o próximo valor.
Usar essa forma é especialmente útil quando o novo valor depende do valor anterior.
Passo 4: entender o botão
<button onClick={aumentar}>
Aumentar
</button>O onClick é uma propriedade do React que permite executar uma função quando o botão recebe um clique.
Observe que escrevemos onClick={aumentar}, sem os parênteses. Assim, fornecemos a função para que o React a execute quando ocorrer o clique.
Passo 5: entender como o número aparece
<p>Valor: {contador}</p>As chaves permitem inserir uma expressão JavaScript dentro do JSX. Nesse caso, o valor atual de contador aparece dentro do parágrafo.
Resultado esperado:
Meu contador
Valor: 0
Depois de um clique: Valor: 1
Depois de dois cliques: Valor: 2
Por que funciona? Porque cada clique solicita uma atualização do estado. O React executa novamente o componente e mostra o novo valor do contador.
7. Segundo exemplo prático: campo de texto interativo
Agora vamos aprender a usar useState para guardar um texto digitado pelo usuário.
Esse exemplo é importante porque formulários aparecem em praticamente todos os tipos de aplicações: cadastro, login, pesquisa, comentários e muito mais.
O que vamos construir?
Um campo no qual a pessoa digita seu nome. Logo abaixo, o aplicativo mostra uma mensagem com o texto digitado.
import { useState } from 'react';
function NomeUsuario() {
const [nome, setNome] = useState('');
return (
<div>
<label htmlFor="nome">
Digite seu nome:
</label>
<input
id="nome"
value={nome}
onChange={evento => setNome(evento.target.value)}
placeholder="Seu nome"
/>
<p>
Olá, {nome || 'visitante'}!
</p>
</div>
);
}
export default NomeUsuario;Passo 1: criar um estado de texto
const [nome, setNome] = useState('');O texto entre aspas está vazio. Portanto, o estado começa sem nenhum nome digitado.
Passo 2: ligar o campo ao estado
<input
value={nome}
onChange={evento => setNome(evento.target.value)}
/>Vamos separar as duas partes principais.
value={nome}: informa que o texto exibido no campo vem do estado nome.
onChange: é executado quando o valor do campo muda. O evento fornece informações sobre a alteração, e evento.target.value representa o texto atual do campo.
Quando alguém digita uma letra, chamamos setNome com o novo texto. O React atualiza o estado e renderiza novamente o componente com o valor atualizado.
Passo 3: mostrar uma mensagem
<p>
Olá, {nome || 'visitante'}!
</p>O operador || permite usar um valor alternativo quando o texto está vazio. Assim, antes de digitar um nome, a mensagem será “Olá, visitante!”.
Resultado esperado:
Campo vazio: Olá, visitante!
Depois de digitar Ana: Olá, Ana!
Depois de trocar para Pedro: Olá, Pedro!
Por que funciona? O estado guarda o texto digitado, e o React mantém o campo e a mensagem sincronizados com esse estado.
Conceito importante: quando um campo recebe seu valor de um estado React e atualiza esse estado por meio de um evento, ele é chamado de campo controlado.
8. Usando useState com objetos e arrays
Até aqui, guardamos números e textos. Mas o useState também pode guardar estruturas maiores, como objetos e arrays.
O que é um objeto?
Um objeto agrupa várias informações relacionadas. Imagine uma ficha de usuário que guarda nome e idade.
const [usuario, setUsuario] = useState({
nome: 'Ana',
idade: 20
});O estado usuário começa com um objeto que possui duas propriedades: nome e idade.
Se quisermos mudar apenas a idade, precisamos preservar a propriedade nome. Uma forma comum é criar um novo objeto com o operador de espalhamento, conhecido como spread operator.
setUsuario(usuarioAtual => ({
...usuarioAtual,
idade: 21
}));O trecho ...usuarioAtual copia as propriedades existentes para o novo objeto. Depois, idade recebe o valor 21.
Assim, o nome continua sendo Ana, enquanto a idade passa a ser 21.
Atenção: evite modificar diretamente o objeto existente, como em usuario.idade = 21. Em vez disso, crie um novo objeto e passe-o à função de atualização.
O que é um array?
Um array é uma lista ordenada de valores. Ele pode representar tarefas, produtos, nomes e muitos outros conjuntos de informações.
const [tarefas, setTarefas] = useState([
'Estudar React',
'Praticar useState'
]);Para adicionar uma nova tarefa, podemos criar um novo array usando o operador de espalhamento:
setTarefas(tarefasAtuais => [
...tarefasAtuais,
'Criar um projeto'
]);O novo array mantém as tarefas anteriores e acrescenta uma nova no final.
Se o próximo valor depende do estado anterior, a função de atualização é uma boa escolha. Isso ajuda a calcular a atualização a partir do valor correto, mesmo quando o React agrupa várias atualizações.
9. Erros comuns ao usar useState
Conhecer os erros mais frequentes ajuda a entender melhor como o React trabalha.
Erro 1: tentar alterar o estado diretamente
Veja o exemplo incorreto:
const [contador, setContador] = useState(0);
contador = contador + 1;O problema é que estamos tentando reatribuir uma variável declarada com const. Além disso, a alteração direta não é a forma de solicitar uma atualização do estado no React.
Use a função de atualização:
setContador(valorAtual => valorAtual + 1);Erro 2: esperar que o estado mude imediatamente
Considere este código:
setContador(contador + 1);
console.log(contador);O console pode mostrar o valor anterior, porque a variável contador pertence à renderização atual. A chamada de atualização solicita uma nova renderização, mas não altera essa variável local imediatamente.
Se contador era zero, o console pode mostrar zero mesmo depois da chamada de setContador.
Para observar o valor após a renderização, você pode utilizar um efeito com useEffect:
import { useEffect, useState } from 'react';
function Contador() {
const [contador, setContador] = useState(0);
useEffect(() => {
console.log('Contador atualizado:', contador);
}, [contador]);
return (
<button
onClick={() => setContador(c => c + 1)}
>
{contador}
</button>
);
}O useEffect executa o efeito após a renderização, quando a dependência contador muda. Em ambientes de desenvolvimento com Strict Mode, alguns comportamentos de efeitos podem ocorrer mais de uma vez para ajudar a encontrar problemas.
Erro 3: esquecer de atualizar o estado de um campo
Um campo controlado precisa de uma forma de atualizar seu estado. Se você usa value={nome}, mas não atualiza nome quando o usuário digita, o campo pode parecer travado.
<input value={nome} />Para um campo editável, adicione um evento que atualize o estado:
<input
value={nome}
onChange={evento => setNome(evento.target.value)}
/>Erro 4: esquecer que o estado inicial não reinicia em toda renderização
Este código não significa que contador voltará a zero a cada renderização:
const [contador, setContador] = useState(0);O zero é utilizado para inicializar o estado quando o componente é montado. Renderizações posteriores preservam o estado existente, desde que a identidade do componente seja mantida.
Erro 5: usar o estado antigo em várias atualizações seguidas
Imagine que você queira aumentar um contador três vezes em uma mesma ação.
setContador(contador + 1);
setContador(contador + 1);
setContador(contador + 1);As três chamadas usam o mesmo valor de contador da renderização atual. Por isso, podem solicitar o mesmo próximo valor, em vez de três aumentos consecutivos.
A forma indicada é utilizar a função de atualização:
setContador(c => c + 1);
setContador(c => c + 1);
setContador(c => c + 1);Cada função recebe o resultado da atualização anterior. Se o contador começou em zero, o resultado final será três.
10. Boas práticas ao utilizar useState
Agora que você conhece o funcionamento básico, veja alguns hábitos que ajudam a escrever código mais seguro e fácil de entender.
1. Escolha nomes claros
Prefira nomes que indiquem o conteúdo do estado.
Bom exemplo: [nome, setNome].
Menos claro: [x, setX], quando x não tem um significado óbvio.
2. Use a função de atualização quando depender do valor anterior
Para contadores, prefira setContador(c => c + 1). Assim, o cálculo utiliza o valor anterior correto.
3. Não altere objetos e arrays diretamente
Crie um novo objeto ou array ao atualizar essas estruturas. Isso ajuda o React a identificar a mudança e mantém o código mais previsível.
4. Guarde apenas o que precisa ser guardado
Não transforme todo valor em estado. Se uma informação pode ser calculada a partir de outros estados e props, muitas vezes você pode calculá-la diretamente durante a renderização.
5. Chame hooks apenas nos lugares permitidos
Chame useState no nível superior de um componente funcional ou de um hook personalizado. Não o chame dentro de condições, loops ou funções comuns que são executadas sob demanda.
6. Entenda o valor inicial
O valor passado ao useState inicializa o estado. Se você precisar transformar um valor inicial caro de calcular, poderá utilizar uma função inicializadora, como useState(() => calcularValor()). O React chama essa função para obter o valor inicial, e em Strict Mode de desenvolvimento ela pode ser chamada mais de uma vez para verificar se é pura.
Quando usar useState e quando usar uma variável comum?
| Situação | Escolha indicada |
|---|---|
| Guardar o número de curtidas. | useState |
| Guardar o texto digitado. | useState |
| Calcular a soma de dois números durante a renderização. | Variável comum, se o resultado não precisar ser guardado separadamente. |
| Guardar um valor temporário usado apenas dentro de uma função. | Variável local, se não precisar persistir entre renderizações. |
11. Exercício prático: crie seu próprio contador
Agora é sua vez de praticar. O objetivo é criar um contador que começa em zero, aumenta de um em um e também possui um botão para diminuir o valor.
Desafio
- Crie um componente chamado Contador.
- Importe useState do React.
- Crie um estado chamado contador com valor inicial zero.
- Crie um botão que aumente o valor em um.
- Crie outro botão que diminua o valor em um.
- Mostre o número atual em um parágrafo.
Dica: você pode usar a mesma lógica do primeiro exemplo, trocando o sinal de mais pelo sinal de menos no segundo botão.
Uma solução possível
import { useState } from 'react';
function Contador() {
const [contador, setContador] = useState(0);
return (
<div>
<p>Contador: {contador}</p>
<button
onClick={() => setContador(c => c + 1)}
>
Aumentar
</button>
<button
onClick={() => setContador(c => c - 1)}
>
Diminuir
</button>
</div>
);
}
export default Contador;Observe que os dois botões utilizam a função de atualização. O primeiro soma um ao valor anterior, e o segundo subtrai um.
Teste mental: se o contador começar em zero, você clicar duas vezes em Aumentar e uma vez em Diminuir, qual será o resultado?
Resposta: 1. O contador passa por 0, 1, 2 e finalmente 1.
12. Resumo: o que você aprendeu?
Vamos revisar as ideias mais importantes deste artigo.
- useState: hook do React que permite manter um estado em um componente.
- Estado: informação que pode mudar durante o uso do aplicativo.
- Valor inicial: valor usado para inicializar o estado.
- Função de atualização: função usada para solicitar uma mudança no estado.
- Renderização: execução do componente para determinar o que deve aparecer na interface.
- Campo controlado: campo de formulário cujo valor é controlado pelo estado React.
- Imutabilidade: prática de criar novos objetos e arrays em vez de modificar diretamente os existentes.
A estrutura mais importante para lembrar:
const [estado, setEstado] = useState(valorInicial);O primeiro elemento é o valor atual. O segundo é a função que solicita sua atualização. Quando o estado muda, o React pode renderizar novamente o componente para refletir a mudança na interface.
13. Conclusão
O useState é um dos primeiros hooks que você precisa aprender para criar aplicações interativas com React. Ele permite guardar informações que mudam, como contadores, nomes, formulários e listas de tarefas.
O mais importante não é decorar uma linha de código. É entender o caminho da informação: o componente lê o estado, o usuário realiza uma ação, a função de atualização é chamada e o React renderiza novamente a interface quando necessário.
Comece com exemplos pequenos. Faça um contador, depois um campo de texto e, em seguida, uma lista de tarefas. Cada exercício ajudará você a compreender melhor como o React administra os dados e atualiza a tela.
Você não precisa dominar tudo de uma vez. Aprenda uma parte, teste o código e observe o resultado. É assim que os conceitos começam a fazer sentido.
🚀 Quer aprender React na prática?
Agora que você entendeu como funciona o useState, que tal dar o próximo passo? Aprenda mais sobre React, pratique com exemplos e desenvolva suas habilidades para criar aplicações web.
Conhecer o curso de React → Este artigo contém um link de afiliado. Posso receber uma comissão caso você compre por meio dele, sem custo adicional para você..png)
Comentários
Postar um comentário