⚛️ Dominando os React Hooks: useState
Gerenciar dados que mudam ao longo da interação do usuário é uma das necessidades mais comuns em uma interface React. É nesse cenário que o useState se torna fundamental: ele permite adicionar estado a componentes funcionais e atualizar a interface quando esse estado muda.
🧠 O que é o useState?
O useState é um Hook do React que retorna dois elementos: o valor atual do estado e uma função responsável por atualizá-lo. O estado recebe um valor inicial e, quando a função de atualização é chamada, o React agenda uma nova renderização com o novo valor.
Um exemplo clássico é um contador: o estado começa em zero e pode ser incrementado a partir de uma interação. A ideia é simples, mas esse mecanismo está por trás de inúmeras experiências interativas, como formulários, filtros, menus, seleções e controles de interface.
🔄 Atualizando o estado corretamente
Quando o novo estado depende do valor anterior, é importante utilizar a função de atualização baseada no estado pendente. Essa abordagem é especialmente útil quando existem várias atualizações dentro da mesma interação, pois o React pode agrupar atualizações de estado.
Outro ponto importante: chamar a função de atualização não altera imediatamente o valor da variável de estado dentro do código que já está sendo executado. O novo valor estará disponível na próxima renderização.
📦 Estado com objetos e arrays
O estado pode armazenar diferentes tipos de valores, incluindo objetos e arrays. Porém, esses dados devem ser tratados como somente leitura: em vez de modificar diretamente o objeto ou array existente, deve-se criar um novo valor para representar a atualização.
Essa prática ajuda o React a identificar corretamente as mudanças e evita problemas em que a interface não é atualizada como esperado.
🚦 Regras importantes
O useState deve ser chamado no nível superior do componente ou de um Hook personalizado. Não deve ser colocado dentro de condicionais ou loops, pois a ordem das chamadas de Hooks precisa permanecer consistente entre as renderizações.
Também é comum utilizar vários useState para representar estados independentes, em vez de concentrar informações diferentes em um único objeto.
🚀 Por que dominar o useState?
Porque entender estado é entender uma parte essencial do React. Ao dominar como o estado é criado, atualizado e preservado, fica muito mais fácil construir interfaces previsíveis, interativas e organizadas.
O useState parece simples, mas seus conceitos — renderização, atualização baseada no estado anterior, imutabilidade e regras dos Hooks — formam uma base indispensável para evoluir no desenvolvimento com React.