O que é e para que serve o useState?

O useState é um React Hook, disponibilizado pelos próprios criadores do React, e tem o objetivo de armazenar e usar estados como o próprio nome já sugere. Podemos comparar os estados com nós mesmos! Por exemplo... Meu mood (humor) ao ver você lendo esse post é feliz! (Agora você entendeu o porquê da capa ser um emoji feliz, certo? Hehe)

Mas nós sabemos que ninguém é de ferro, e posso ficar triste ou pensativo em determinados momentos do dia. Aliás, é muito comum que o nosso mood mude diversas vezes à medida que o tempo vai passando. E na programação pode acontecer a mesma coisa. Um determinado componente pode mudar de estado várias e várias vezes. E foi pensando nisso que o useState foi criado! Vamos entender como ele funciona e como o usar de fato.

Como usar o useState?

Antes de tudo precisamos importar o useState da biblioteca do React. Então:

import { useState } from 'react';

Agora chegou a hora de usar ele de fato. Vou continuar usando o exemplo comparativo que fizemos antes, o mood, belê? 😂

O useState retorna dois valores dentro de um array. O primeiro valor é o valor do estado, e o segundo é uma função que altera ou atualiza o valor do estado em sí. Podemos desestruturar eles da seguinte forma:

const [ mood, setMood ] = useState('Feliz');

Após a igualdade estamos apenas chamando o useState e declarando o valor inicial do estado, que no código acima é uma string com o valor "Feliz". Poderíamos iniciar sem um mood, ou seja, uma string vazia, que é o mais comum. Nesse caso, o nosso código ficaria da seguinte forma:

const [ mood, setMood ] = useState('');

Desmontando o código acima em partes, podemos ver que foram declaradas duas variáveis: mood e setMood. A primeira é quem está armazenando o valor do estado. Dentro dessa string pode ter qualquer texto. O setMood é a função responsável por alterar o valor do estado, ou seja, da variável mood.

Então, no exemplo acima o meu mood começa feliz. Mas e se eu quiser mudar o meu mood para "Pensativo" quando um usuário clicar em um botão na minha página, como fazemos? Vamos lá!

import React, { useState } from 'react';

const App = () => {  
  const [ mood, setMood ] = useState('Feliz');

  return (
    <>
      <button type='button' onClick={() => setMood('Pensativo')}>
        Clique aqui para mudar o mood
      </button>

      <p>Meu mood atual é: {mood}</p>
    </>
  )
}

Acabamos de criar um botão que muda o mood para "Pensativo" toda a vez que o botão é clicado! Nesse caso a mudança só ocorreria uma vez, já que iniciamos o mood feliz, e quando clicamos no botão ele muda para pensativo. Podemos criar um código mais variável, que muda conforme o seu mood. Que tal? Vamos construir ele então!

O código irá renderizar alguns botões de mood. Sempre que você clicar em um botão, o mood será alterado para o valor daquele botão. No código, o que deve acontecer é:

import React, { useState } from 'react';

const App = () => {  
  const [mood, setMood] = useState("Feliz");

  return (
    <div>
      <button type="button" onClick={() => setMood("Feliz")}>
        Feliz
      </button>
      <button type="button" onClick={() => setMood("Com fome")}>
        Com fome
      </button>
      <button type="button" onClick={() => setMood("Pensativo")}>
        Pensativo
      </button>
      <button type="button" onClick={() => setMood("Triste")}>
        Triste
      </button>
      <button type="button" onClick={() => setMood("Animado")}>
        Animado
      </button>

      <p>Meu mood atualmente é: {mood}</p>
    </div>
  );
}

Poderíamos melhorar (e muito) o código acima. Poderíamos colocar todos os moods dentro de um array, e fazer um map para que ele retorne um botão para cada mood. Sendo assim, quando quisermos adicionar um mood, é só acrescentarmos na nossa lista (que pode vir de uma API por exemplo). Vamos aproveitar para fazer isso? É bem rápido, e eu te ajudo!

import React, { useState } from 'react';

const App = () => {  
  const [mood, setMood] = useState("Feliz");

  const allMoods = [
    "Feliz",
    "Com fome",
    "Pensativo",
    "Triste",
    "Animado"
  ];

  return (
    <div>
      {allMoods.map((oneMood) => {
        return (
          <button type="button" onClick={() => setMood(oneMood)}>
            {oneMood}
          </button>
        );
      })}

      <p>Meu mood atualmente é: {mood}</p>
    </div>
  );
}

E finalmente chegamos ao fim de mais uma explicação! Apesar de longa, é simples e agora você está pronto para usar o useState! Espero ter te ajudado, e até a próxima!