Os primeiros passos no React Hooks

Hooks são funções que deixam você usar estado e outros recursos do React dentro de componentes de função. Antes deles, isso só dava com classes. Hoje, hook é o padrão. Vamos aos dois que você mais vai usar.

useState — guardar informação que muda

useState cria uma "variável de estado": quando ela muda, o React redesenha o componente.

import { useState } from "react";

function Contador() {
  const [contagem, setContagem] = useState(0);

  return (
    <button onClick={() => setContagem(contagem + 1)}>
      Cliquei {contagem} vezes
    </button>
  );
}

O useState(0) diz "comece em 0". Ele devolve o valor atual e uma função pra atualizar. Nunca mude o valor direto (contagem++) — sempre use o setContagem.

useEffect — fazer algo depois que a tela renderiza

useEffect serve pra "efeitos colaterais": buscar dados de uma API, ouvir um evento, mexer no título da página.

import { useEffect, useState } from "react";

function Perfil({ id }) {
  const [usuaria, setUsuaria] = useState(null);

  useEffect(() => {
    fetch(`/api/usuarias/${id}`)
      .then((r) => r.json())
      .then(setUsuaria);
  }, [id]);

  if (!usuaria) return <p>Carregando…</p>;
  return <h1>{usuaria.nome}</h1>;
}

Aquele [id] no final é a lista de dependências: o efeito roda de novo sempre que o id mudar. Se você deixa a lista vazia [], roda uma vez só. Se você esquece a lista, roda em toda renderização — e aí mora um bug clássico de loop infinito.

Os erros mais comuns no começo

• Chamar hook dentro de if, for ou função aninhada. Hooks só no topo do componente.
• Esquecer a lista de dependências do useEffect.
• Tentar ler o estado logo depois de setar (setX(1); console.log(x)) — a atualização não é imediata.

Comece pequeno: um contador, um formulário controlado, uma busca em API. Os hooks fazem sentido rápido quando você escreve, não quando só lê.