Aula 03 – Hooks I: useState e Estado Local 🎣

Nesta aula, vamos aprender como tornar nossas aplicações interativas. O Estado é o que permite ao React lembrar de informações e reagir a ações do usuário.

🧠 O que é o "Estado"?

Diferente das Props (que são passadas de fora), o Estado é uma informação que o próprio componente gerencia internamente.

Conceito: Reatividade

Sempre que o estado de um componente muda, o React "re-renderiza" o componente, atualizando a interface automaticamente para refletir a nova informação.

🎣 O Hook `useState`

Para adicionar estado a um componente funcional, usamos o hook useState.

import { useState } from 'react';

function Contador() {
  // declarando uma variável de estado 'valor' e a função 'setValor'
  const [valor, setValor] = useState(0);

  return (
    <div>
      <p>Você clicou {valor} vezes</p>
      <button onClick={() => setValor(valor + 1)}>
        Aumentar
      </button>
    </div>
  );
}

Anatomia do useState:

valor: O estado atual.
setValor: A função para atualizar o estado.
0: O valor inicial.

⚠️ Regras dos Hooks

Apenas no nível superior: Não chame hooks dentro de loops, condições ou funções aninhadas.
Apenas em funções React: Chame hooks apenas em componentes funcionais ou em Hooks Customizados.

🔄 Fluxo de Dados e Estado

O estado pode ser passado para baixo via props, mas nunca para cima (diretamente).

graph TD
    Parent[Componente Pai - Estado: contador] -- passa via props --> Child[Componente Filho - recebe: valor]
    Child -- chama função do pai --> Parent

🚀 Prática da Aula

Vamos criar um interruptor de "Modo Escuro" (Dark Mode) simples.

Crie um componente Tema.
Use o useState para guardar um booleano (true/false).
Ao clicar no botão, altere o estado.
Mude o estilo (background-color) do componente baseado no estado.

# Dica de código
const [isDark, setIsDark] = useState(false);

# No JSX
<div style={{ backgroundColor: isDark ? 'black' : 'white' }}>

Importante

Nunca altere o estado diretamente (valor = valor + 1). Sempre use a função de atualização (setValor).