Este é o primeiro artigo de uma série de 10, que explica de forma simplificada e com exemplos, os react hooks mais utilizados em programação.
O Hook useState
é um dos Hooks mais importantes e mais usados no React. Ele permite que você gerencie o estado em componentes funcionais de forma semelhante a como faria em componentes de classe.
Aqui está um exemplo básico de como usar o useState
para gerenciar o estado de um componente funcional:
Neste exemplo, estamos usando o useState
para gerenciar o estado de um contador. Quando o usuário clica no botão, a função setCount
é chamada para atualizar o valor de count. O useState
retorna um par de valores: o estado atual e uma função para atualizá-lo.
O valor inicial de count
é definido como 0 quando chamamos o useState
. Você pode passar qualquer valor que desejar como o valor inicial para o estado. Por exemplo, se quisermos começar o contador com um valor de 10, poderíamos fazer isso assim:
Gerenciamento de Objetos e Arrays
O useState
também pode ser usado para gerenciar o estado de outros tipos de valores, como objetos ou arrays. Aqui está um exemplo de como usar o useState para gerenciar o estado de um objeto:
Neste exemplo, estamos usando o useState
para gerenciar o estado de um objeto que representa um usuário. Quando o usuário clica no botão, a função setUser é chamada para atualizar o valor de user
.
Hook useState em Formulários
Outra aplicabilidade do useState
é quando precisamos gerenciar o estado de um formulário com nome, e-mail e senha. Veja:
Neste exemplo, estamos usando o useState
para gerenciar o estado de um formulário. O estado é um objeto que contém os valores dos campos de formulário. Quando o usuário altera um campo, chamamos a função handleChange
para atualizar o valor correspondente no estado.
Gerenciamento do Estado de Toggle
Outro uso comum do useState
ocorre quando queremos gerenciar o estado de um toggle:
No exemplo acima, estamos usando o useState
para gerenciar o estado de um toggle. Quando o usuário clica no botão, chamamos a função setIsOn
para inverter o valor de isOn
.
O useState
é inicializado com o valor false
, que representa o estado "off" do toggle. Quando o usuário clica no botão, chamamos a função setIsOn
com o operador de negação !
, o que inverte o valor de isOn
de false
para true
ou de true
para false
.
Hook useState para Gerenciar Listas
Também, emprega-se o hook useState
para gerenciar o estado de uma lista de itens expansíveis:
Neste exemplo, estamos usando o useState
para gerenciar o estado de uma lista de itens expansíveis. O estado é um array de objetos que representam cada item, com um texto e um indicador de se o item está expandido ou não.
Quando o usuário clica em um item, chamamos a função toggleExpanded
para alternar o estado de expansão do item. Para fazer isso, criamos uma cópia do array de itens usando a sintaxe de propagação (...
), alteramos o valor do indicador de expansão do item correspondente e chamamos a função setItems
para atualizar o estado.
Gerenciamento de Carrinho de Compras
Ainda, o useState
pode ser aplicado no gerenciamento de um carrinho de compras. Acompanhe:
No exemplo, a primeira coisa que fazemos é importar o hook useState
do React. Em seguida, criamos uma função chamada Example
que renderiza um componente.
Dentro da função Example
, usamos o hook useState
para inicializar o estado do carrinho como um array vazio. Isso é feito através da seguinte linha de código:
O hook useState
retorna um par de valores: o estado atual e uma função para atualizar o estado. No caso do estado do carrinho, chamamos esses valores de cart
e setCart
, respectivamente.
Em seguida, criamos duas funções: addToCart
e removeFromCart
. A função addToCart
é chamada quando o usuário clica em um dos botões "Adicionar Item" e adiciona um novo item ao carrinho usando a sintaxe de propagação (...
). A função removeFromCart
é chamada quando o usuário clica no botão "Remover do carrinho" e remove o item do carrinho usando o método filter
.
Por fim, renderizamos o componente. Primeiro, mostramos os itens no carrinho usando um loop map
e um botão para remover cada item. Em seguida, mostramos os itens disponíveis para adicionar ao carrinho usando três botões. Quando o usuário clica em um desses botões, chamamos a função addToCart
para adicionar o item ao carrinho.
Conclusão
O hook useState
é um dos hooks mais importantes e amplamente utilizados em React, pois permite que você gerencie o estado de seu componente de maneira simples e declarativa.
Com o useState
, é possível armazenar qualquer tipo de valor como estado, como números, strings, objetos ou arrays, e atualizar esse estado com facilidade usando a função setState
.
O uso do useState
é fundamental para construir aplicativos interativos com React, pois permite que você crie componentes que possam reagir a ações do usuário, como cliques em botões ou mudanças em formulários, e atualizar o estado de acordo.
Além disso, o useState
é muito útil para separar o estado lógico do seu componente da lógica de renderização, o que torna o código mais fácil de entender e manter.
Em resumo, o useState
é uma ferramenta fundamental para qualquer desenvolvedor React que busca criar aplicativos interativos e reutilizáveis.
Autor: Marcelo Schäffer Petry
Top comments (0)