⚛Os 10 React Hooks Mais Úteis: 01 - useState⚛
Tags: javascript, react, beginners, webdev
Published: 2022-12-21 14:18:31


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uekatz55tbz5qd6n6cxy.jpg)

_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:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/59yy3bw6re3rmu7xmd7b.png)
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:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m61l43wzo96gxjhxsfv3.png)
<br>

## 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:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m3tewhw77ujeby4i4pwb.png)
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`.
<br>
## 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:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3aqj0mkhjzdx6f3acrye.png)
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.
<br>
## Gerenciamento do Estado de Toggle
Outro uso comum do `useState` ocorre quando queremos gerenciar o estado de um **toggle**:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qwm2kui8gwnsipttimgp.png)
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`.
<br>
## Hook useState para Gerenciar Listas
Também, emprega-se o hook `useState` para gerenciar o estado de uma lista de itens expansíveis:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4s6x717a53b04pt8ngpi.png)
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.
<br>
## Gerenciamento de Carrinho de Compras
Ainda, o `useState` pode ser aplicado no gerenciamento de um carrinho de compras. Acompanhe:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5wco2cjhmwbv9briqjmv.png)
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:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nybf43bvwg97vdl6auaa.png)
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.
<br>
## 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](https://marcelopetry.com)