DEV Community

Cover image for Estados: useState()
Vinícius Neto
Vinícius Neto

Posted on

Estados: useState()

O useState é um Hook de controle de estado para componentes React, mas o que são hooks? Hooks são funções que permitem a você “ligar-se” aos recursos de state e ciclo de vida do React a partir de componentes funcionais. Hooks não funcionam dentro de classes, eles permitem que você use React sem classes.

Digamos que o useState foi criado para dar vida aos estados de um componente e ele poder ser atualizado dinamicamente na página.

useState
Exemplo abaixo:

const [count, setCount] = useState(0);
Enter fullscreen mode Exit fullscreen mode

O useState funciona como uma desestruturação de Array, onde temos as variáveis count e setCount, a variável count é a variável que guarda o valor original e se o usuário deseja atualizar esse valor, ele vai passar a responsabilidade para a variável setCount, por convenção a variável que atualiza o valor, recebe a palavra 'set' no inicio, por exemplo: setText, setCount, setUser, etc.

Imagem para ilustrar o que foi explicado até aqui:
Image description

  1. Importamos o Hook useState do React. Ele nos permite manter o state local em um componente de função.

import React, { useState } from 'react';

  1. Dentro do componente Example, declaramos uma nova variável de state chamando o Hook useState. Ele retorna um par de valores, no qual damos nomes. Estamos chamando nossa variável count porque ela mantém o número de cliques no botão. Inicializamos como zero passando 0 como o único argumento do useState. O segundo item retornado é a própria função. Ela nos permite atualizar o count então nomeamos para setCount.

const [count, setCount] = useState(0);

  1. Quando o usuário clica, chamamos setCount com um novo valor. O React então vai re-renderizar o componente Example, passando o novo valor de count para ele.
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>Click me</button>
Enter fullscreen mode Exit fullscreen mode

Obrigado por ler o artigo até aqui, algumas informações foram retiradas do site oficial do React

E você, já utiliza o useState nos seus componentes? Até a próxima!

Top comments (0)