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

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

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>

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!


Print Share Comment Cite Upload Translate
APA
Vinícius Neto | Sciencx (2024-03-29T06:29:53+00:00) » Estados: useState(). Retrieved from https://www.scien.cx/2021/10/26/estados-usestate/.
MLA
" » Estados: useState()." Vinícius Neto | Sciencx - Tuesday October 26, 2021, https://www.scien.cx/2021/10/26/estados-usestate/
HARVARD
Vinícius Neto | Sciencx Tuesday October 26, 2021 » Estados: useState()., viewed 2024-03-29T06:29:53+00:00,<https://www.scien.cx/2021/10/26/estados-usestate/>
VANCOUVER
Vinícius Neto | Sciencx - » Estados: useState(). [Internet]. [Accessed 2024-03-29T06:29:53+00:00]. Available from: https://www.scien.cx/2021/10/26/estados-usestate/
CHICAGO
" » Estados: useState()." Vinícius Neto | Sciencx - Accessed 2024-03-29T06:29:53+00:00. https://www.scien.cx/2021/10/26/estados-usestate/
IEEE
" » Estados: useState()." Vinícius Neto | Sciencx [Online]. Available: https://www.scien.cx/2021/10/26/estados-usestate/. [Accessed: 2024-03-29T06:29:53+00:00]
rf:citation
» Estados: useState() | Vinícius Neto | Sciencx | https://www.scien.cx/2021/10/26/estados-usestate/ | 2024-03-29T06:29:53+00:00
https://github.com/addpipe/simple-recorderjs-demo