Aqui está um tutorial de useState (ou quase)

Sempre que alguém se depara com o React pela primeira vez, se assusta com os seus hooks e funcionalidades, não é mesmo? Eu mesmo sinto medo de alguns hooks e já fui dormir chorando várias vezes por conta de alguns deles.

Mas fica tranquilo que pelo menos o useState eu posso tentar te ensinar de uma forma simples como se você estivesse no ensino fundamental pela primeira vez.

Em React nós temos vários hooks e um deles é o useState, esse pra mim é o mais simples de entender e aplicar, então vamos ver como que ele funciona.

Criando e iniciando o useState

O que é o useState? useState é um hook do React a qual nos retorna um array com dois elementos, sendo o primeiro o nosso estado e o segundo uma função para alterar o nosso estado. Além disso, podemos passar como argumento, um estado inicial para o nosso estado. Não entendeu ainda? relaxa que eu vou te explicar. Veja no exemplo abaixo:

import { useState } from "react";

export default function Component() {
  const [state, setState] = useState(0);

Aqui nós temos o state que é o estado, o setState que é a função para alterar o valor do nosso estado e o useState(0) que é o valor inicial do nosso estado, nesse caso é o 0 (poderia ser qualquer outro valor, como uma string e boolean).

Utilizando o useState na prática

Para entender melhor como funciona o useState, precisamos também entende-lo na prática. E pra isso vou mostrar um exemplo de useState para fazer um contador simplezão.

import { useState } from "react";

export default function Component() {
  const [counter, setCounter] = useState(0);

  function addCounter() {
    setCounter(counter + 1);
  }

  return (
    <div>
      <h1>{counter}</h1>
      <button onClick={addCounter}>Adicionar</button>
    </div>
  );
}

na linha 4 temos um exemplo de um estado que está recebendo um valor inicial de 0

const [counter, setCounter] = useState(0);

e uma função logo abaixo na linha 6 que irá acrescentar 1 para nosso estado toda vez que o botão for clicado

function addCounter() {
    setCounter(counter + 1);
  }

para exibir o estado na tela é só adicionar um {} no seu HTML com o estado dentro, no exemplo é o h1 (linha 12).

<h1>{counter}</h1>

Ao clicar no botão duas vezes automaticamente nosso estado foi exibido na página com o número 2, graças a nossa funçãozinha chamada addCounter que acrescentou 2 vezes.

CONSEGUIMOS, UHUL! criamos um contadorzinho super simples e funcional com o useState! Agora é só praticar com outros exemplos que eu tenho certeza que você vai se sair super bem! ❤️