DEV Community

Marcelo Petry
Marcelo Petry

Posted on

1

⚛Os 10 React Hooks Mais Úteis: 01 - useState⚛

Image description

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

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

Image description
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:
Image description
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:

Image description
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:

Image description
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
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

Sentry blog image

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.

Read more

Top comments (0)

SurveyJS custom survey software

JavaScript Form Builder UI Component

Generate dynamic JSON-driven forms directly in your JavaScript app (Angular, React, Vue.js, jQuery) with a fully customizable drag-and-drop form builder. Easily integrate with any backend system and retain full ownership over your data, with no user or form submission limits.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay