Exemplos Práticos com useState

Exemplo 1: Contador Simples

import React, { useState } from 'react';

function Contador() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Você clicou {count} vezes</p>
      <button onClick={() => setCount(count + 1)}>
        Clique aqui
      </button>
    </div>
  );
}

Exemplo 2: Toggle de Visibilidade

function ToggleTexto() {
  const [mostrar, setMostrar] = useState(false);

  return (
    <div>
      <button onClick={() => setMostrar(!mostrar)}>
        {mostrar ? 'Esconder' : 'Mostrar'} Texto
      </button>
      {mostrar && <p>Este texto pode ser escondido!</p>}
    </div>
  );
}

Exemplo 3: Input Controlado

function FormularioNome() {
  const [nome, setNome] = useState('');

  return (
    <div>
      <input
        type="text"
        value={nome}
        onChange={(e) => setNome(e.target.value)}
        placeholder="Digite seu nome"
      />
      <p>Olá, {nome || 'visitante'}!</p>
    </div>
  );
}

Exemplo 4: Estado com Objetos

function PerfilUsuario() {
  const [usuario, setUsuario] = useState({
    nome: '',
    email: '',
    idade: 0
  });

  const atualizarCampo = (campo, valor) => {
    setUsuario(prevUsuario => ({
      ...prevUsuario,
      [campo]: valor
    }));
  };

  return (
    <div>
      <input
        placeholder="Nome"
        value={usuario.nome}
        onChange={(e) => atualizarCampo('nome', e.target.value)}
      />
      <input
        placeholder="Email"
        value={usuario.email}
        onChange={(e) => atualizarCampo('email', e.target.value)}
      />
      <input
        type="number"
        placeholder="Idade"
        value={usuario.idade}
        onChange={(e) => atualizarCampo('idade', parseInt(e.target.value))}
      />
    </div>
  );
}

Boas Práticas

1. Sempre use a função de atualização para estado baseado no anterior

// ❌ Evite
setCount(count + 1);

// ✅ Prefira
setCount(prevCount => prevCount + 1);

2. Não modifique o estado diretamente

// ❌ Evite
const usuario = { nome: 'João' };
usuario.nome = 'Maria'; // Mutação direta
setUsuario(usuario);

// ✅ Prefira
setUsuario({ ...usuario, nome: 'Maria' });

3. Estados múltiplos vs. estado único

// Múltiplos estados para valores independentes
const [nome, setNome] = useState('');
const [idade, setIdade] = useState(0);

// Estado único para valores relacionados
const [formData, setFormData] = useState({
  nome: '',
  idade: 0
});