Desde a versão 16, os hooks são uma das principais ferramentas do React e, com certeza, foram uma das mudanças que mais me agradou do ponto de vista de desenvolvimento de aplicações para web.
Se você já estudou um pouco sobre o React e ouvir falar sobre os famosos hooks, provavelmente já esbarrou com o useState em algum momento.
Dentre todos os hooks do React, o useState é o mais importante na minha opinião e provavelmente o primeiro que você irá aprender do ecossistema React. Por isso, nesse artigo vou explicar como esse hook funciona. E caso haja alguma dúvida, por favor, deixe um comentário que tentarei ajudar.
Clico de vida (Lifecycle)
Antes de entendermos como o useState, acho que você precisa saber um pouco sobre ciclo de vida, ou lifecycle. Se você já estudou essa parte do React e se sinta confortável para avançar essa parte do artigo, bastante ir para o próximo tópico.
Oficialmente, a ideia do React de trabalhar com ciclos de vida que permite que a página seja atualizada sem que haja necessidade de carregar completamente a estrutura da página.
Imagine um relógio como exemplo: sempre que um ponteiro se mexe, ele atualiza a hora e isso impacta do ciclo de vida do relógio. No caso do React, o nosso relógio é a página, que sofrerá modificações somente quando algo acontecer.
Esse tipo de renderização é um dos principais pontos do React e tudo isso é possível graças ao chamado Virtual DOM. Se você nunca ouviu falar em Document Object Model (DOM) e Virtual DOM (VDOM), recomendo que dê uma olhada no artigo no final dessa postagem.
Mas, em resumo, o Virtual DOM é uma camada acima do DOM que permite que sejam feitas pequenas modificações sem que impactem completamente o DOM da página, que representa a página em si.
E o useState?
Agora que você já sabe o que é o ciclo de vida no React, acho que deve estar se perguntando: "mas o que isso tem a ver com o useState?"
Se seguirmos o exemplo do relógio novamente, podemos dizer que o useState representa três coisas: o ponteiro na posição inicial, a ação do ponto ao se mexer e o ponteiro na nova posição.
Quando usarmos o useState, teremos que definir três coisas: como se chamará o estado, qual função que definirá um novo estado e qual o estado inicial. De certa forma, podemos alinhar isso com o ponteiro do relógio como explicado acima.
Para armazenarmos um estado usando useState e permitir que realmente possamos utilizar ele no nosso código, é necessário seguir a seguinte sintaxe:
const [estado, setEstado] = useState(estado inicial)
Como é possível notar, o estado inicial é definido entre parênteses e pode ser basicamente qualquer coisa, indo de uma string, um array ou quase qualquer outra coisa que você queira armazenar como um estado.
Por sua vez, o estado está definido após o const e servirá como uma variável, podendo armazenar, inicialmente, tudo que foi definido dentro do useState. Esse estado pode ser usado para ser renderizado na tela ou para criar novos elementos a partir deles.
De certa forma, podemos usar esse estado realmente como uma variável, havendo poucas regras que restringirão seu uso.
O setEstado, se seguirmos o modelo do relógio novamente, é ação de mudar o ponteiro de lugar ou, no caso do React, o estado. Podemos imaginar o setEstado como uma função que terá um único papel: modificar o estado.
setEstado(novoEstado)
Esse estado pode ser modificado para qualquer coisa independente do que foi definido no estado inicial do useState. Apesar disso, recomendo que você não tente alterar muito o propósito do seu estado, principalmente visto que você pode definir vários estados.
Posso usar com TypeScript?
Sei que muitos desenvolvedores gostam de desenvolver usando TypeScript, inclusive, eu. No caso do useState, é sim possível usar o TypeScript para desenvolver suas aplicações React. Apesar disso, como você já deve imaginar, é preciso acrescentar um type ao seu estado.
No código, o useState fica assim com TypeScript:
const [hello, setHello] = useState<string>("Hello world")
const [numeros, setNumeros] = useState<number[]>([1, 2, 3, 4, 5])
Se precisar adicionar múltiplos itens no seu useState, você pode colocar um type do TypeScript:
type ItensDoEstado = {
id: number;
name: string;
idade: number;
}
const [estado, setEstado] = useState<ItensDoEstado>([id: 1, name: 'Alex', idade: 20])
Conclusão
Em resumo, o useState é um dos principais hooks do React e provavelmente o que você mais vai usar durante o desenvolvimento de uma aplicação. Essa ferramenta tem como objetivo armazenar um estado e permitir que você altere seu valor de acordo com a necessidade.
Top comments (0)