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

marcelopetry.com