O useState no React é um Hook utilizado para armazenar e atualizar informações dentro de componentes funcionais. Com ele, podemos criar elementos interativos, como contadores, formulários, menus, carrinhos de compras e filtros, sem precisar modificar o HTML manualmente. Neste guia, você aprenderá como criar um contador que aumenta sempre que o usuário clica em um botão. Também entenderá a diferença entre atualizar uma página com JavaScript puro e controlar a interface por meio do estado no React. O objetivo é explicar, de forma prática, como funcionam a variável de estado, a função de atualização, o valor inicial, o JSX e o evento onClick. Ao final, você terá um exemplo completo e poderá aplicar o mesmo conceito em projetos maiores.
Como um contador funciona no JavaScript puro
Antes de aprender a utilizar o useState, é importante entender como um contador pode ser criado com JavaScript puro. Nesse modelo, normalmente começamos declarando uma variável para armazenar o número atual. Depois, criamos uma função que aumenta esse valor e atualiza manualmente o conteúdo exibido na página.
<p id="contador">0</p>
<button onclick="somar()">
Adicionar
</button>
<script>
let contador = 0;
function somar() {
contador++;
document.getElementById("contador").innerText = contador;
}
</script>Nesse exemplo, a variável contador começa com o valor zero. Sempre que a função somar é executada, o operador de incremento adiciona uma unidade ao valor atual. Em seguida, o método document.getElementById localiza o parágrafo e altera seu conteúdo por meio da propriedade innerText.
Esse código funciona, mas exige que o desenvolvedor encontre o elemento da página e modifique diretamente o DOM. Em aplicações maiores, esse processo pode tornar o código mais difícil de organizar. No React, adotamos uma abordagem diferente: atualizamos os dados do componente e permitimos que a biblioteca atualize a interface automaticamente.
O que é useState e por que ele é importante
O useState é um Hook do React responsável por adicionar estado a um componente funcional. O estado representa uma informação que pode mudar durante a utilização da aplicação. Quando essa informação é atualizada, o React renderiza novamente as partes necessárias da interface.
Para utilizar o Hook, primeiro precisamos importá-lo diretamente do pacote React:
import { useState } from "react";Dentro do componente, criamos o estado utilizando a seguinte estrutura:
const [count, setCount] = useState(0);Essa linha possui três partes fundamentais:
- count: guarda o valor atual do contador.
- setCount: é a função utilizada para atualizar esse valor.
- useState(0): define zero como o valor inicial do estado.
Por que não alterar diretamente a variável count? Porque o React precisa ser informado de que o estado mudou. A função setCount realiza essa atualização e aciona a nova renderização do componente. Essa característica mantém os dados e a interface sincronizados.
Como exibir e atualizar o contador no JSX
Depois de criar o estado, podemos exibir seu valor dentro do JSX. Para inserir uma expressão JavaScript na marcação do componente, utilizamos chaves:
<p>Contador: {count}</p>A cada nova renderização, o React utiliza o valor mais recente de count. Isso significa que não precisamos buscar o parágrafo nem substituir seu texto manualmente. Basta atualizar o estado para que o conteúdo apresentado na tela acompanhe a mudança.
Para aumentar o contador, podemos criar uma função chamada somar:
function somar() {
setCount((contadorAtual) => contadorAtual + 1);
}Nesse caso, passamos uma função para setCount. O parâmetro contadorAtual representa o valor mais recente do estado. Em seguida, retornamos esse valor acrescido de uma unidade. Essa forma é especialmente recomendada quando o próximo estado depende do estado anterior.
Também seria possível escrever setCount(count + 1) em um contador simples. Entretanto, a atualização funcional oferece mais segurança quando existem várias alterações consecutivas, eventos assíncronos ou operações que dependem diretamente do valor anterior.
Como utilizar o evento onClick no React
Para executar a função quando o usuário clicar no botão, utilizamos o evento onClick. Diferentemente do HTML tradicional, os eventos no JSX seguem o padrão camelCase. Por isso, escrevemos onClick com a letra C maiúscula.
<button type="button" onClick={somar}>
Adicionar
</button>Observe que passamos apenas a referência da função: onClick={somar}. Não devemos escrever onClick={somar()} nesse caso, pois os parênteses executariam a função durante a renderização do componente, antes de qualquer clique.
O fluxo completo acontece da seguinte maneira:
- O usuário clica no botão.
- O React executa a função somar.
- A função setCount calcula o próximo valor.
- O estado é atualizado.
- O componente é renderizado novamente com o novo número.
Perceba como o código descreve o comportamento da interface sem precisar controlar diretamente cada alteração no HTML. Essa abordagem declarativa é uma das principais características do desenvolvimento com React.
Código completo do contador com useState
A seguir, veja o componente completo. Ele importa o Hook, cria o estado, define a função responsável pelo incremento e associa essa função ao clique do botão.
import { useState } from "react";
function App() {
const [count, setCount] = useState(0);
function somar() {
setCount((contadorAtual) => contadorAtual + 1);
}
return (
<section>
<h1>Contador com React</h1>
<p>Contador: {count}</p>
<button type="button" onClick={somar}>
Adicionar
</button>
</section>
);
}
export default App;Apesar de ser simples, esse exemplo apresenta conceitos essenciais do React: componentes funcionais, Hooks, estado, renderização e manipulação de eventos. Depois de compreender essa estrutura, você poderá adicionar outros botões, como diminuir ou zerar o contador.
Também é possível utilizar o mesmo raciocínio em situações reais. Um estado pode guardar o conteúdo de um campo, a quantidade de produtos em um carrinho, a aba selecionada, o resultado de uma busca ou a informação de que um modal está aberto. Em todos esses casos, a interface responde automaticamente às mudanças do estado.
Perguntas frequentes sobre useState
Posso alterar o valor de count diretamente?
Não é recomendado escrever algo como count = count + 1. Essa alteração não utiliza o mecanismo de atualização do React e pode não provocar uma nova renderização. Utilize sempre a função setCount para modificar o estado.
Por que utilizar uma função dentro de setCount?
A função recebe o estado mais recente e retorna o próximo valor. Essa abordagem reduz problemas quando existem atualizações agrupadas ou quando o novo resultado depende diretamente do valor anterior.
O useState aceita apenas números?
Não. O useState pode armazenar textos, números, valores booleanos, arrays, objetos e outros tipos de dados. O valor inicial deve ser escolhido de acordo com a informação que o componente precisa controlar.
Onde o useState pode ser utilizado?
Hooks devem ser chamados no nível principal de componentes funcionais ou dentro de Hooks personalizados. Eles não devem ser executados dentro de condições, laços ou funções comuns, pois o React depende da ordem das chamadas para controlar corretamente cada estado.
Conclusão
O useState no React permite criar componentes interativos de maneira organizada e declarativa. No exemplo do contador, count armazena o número atual, enquanto setCount atualiza esse valor. Quando o estado muda, o React renderiza novamente a parte necessária da interface, eliminando a necessidade de localizar elementos e alterar o HTML manualmente. O evento onClick conecta o botão à função de incremento, e a atualização funcional garante que o cálculo utilize o valor mais recente. Embora o contador seja um exercício básico, ele apresenta fundamentos aplicáveis a formulários, menus, filtros, modais e carrinhos de compras. Dominar esse processo é um passo essencial para desenvolver aplicações React mais dinâmicas, previsíveis e fáceis de manter.
