Estado com Objetos e Arrays

Princípio da Imutabilidade

No React, o estado deve ser tratado como imutável. Sempre crie uma nova cópia ao atualizar.

Trabalhando com Objetos

Atualizando Propriedades

function PerfilUsuario() {
  const [usuario, setUsuario] = useState({
    nome: 'João',
    email: 'joao@email.com',
    idade: 25,
    endereco: {
      cidade: 'São Paulo',
      estado: 'SP'
    }
  });

  // Atualizar uma propriedade
  const atualizarNome = (novoNome) => {
    setUsuario(prevUsuario => ({
      ...prevUsuario,
      nome: novoNome
    }));
  };

  // Atualizar propriedade aninhada
  const atualizarCidade = (novaCidade) => {
    setUsuario(prevUsuario => ({
      ...prevUsuario,
      endereco: {
        ...prevUsuario.endereco,
        cidade: novaCidade
      }
    }));
  };

  return (
    <div>
      <h2>{usuario.nome}</h2>
      <p>{usuario.email}</p>
      <p>{usuario.endereco.cidade}, {usuario.endereco.estado}</p>
    </div>
  );
}

Trabalhando com Arrays

Operações Comuns

function ListaTarefas() {
  const [tarefas, setTarefas] = useState([
    { id: 1, texto: 'Estudar React', concluida: false },
    { id: 2, texto: 'Fazer exercícios', concluida: true }
  ]);

  // Adicionar item
  const adicionarTarefa = (texto) => {
    const novaTarefa = {
      id: Date.now(),
      texto,
      concluida: false
    };
    setTarefas(prevTarefas => [...prevTarefas, novaTarefa]);
  };

  // Remover item
  const removerTarefa = (id) => {
    setTarefas(prevTarefas => 
      prevTarefas.filter(tarefa => tarefa.id !== id)
    );
  };

  // Atualizar item
  const toggleTarefa = (id) => {
    setTarefas(prevTarefas =>
      prevTarefas.map(tarefa =>
        tarefa.id === id
          ? { ...tarefa, concluida: !tarefa.concluida }
          : tarefa
      )
    );
  };

  // Ordenar array
  const ordenarPorStatus = () => {
    setTarefas(prevTarefas => 
      [...prevTarefas].sort((a, b) => a.concluida - b.concluida)
    );
  };

  return (
    <div>
      {tarefas.map(tarefa => (
        <div key={tarefa.id}>
          <input
            type="checkbox"
            checked={tarefa.concluida}
            onChange={() => toggleTarefa(tarefa.id)}
          />
          <span>{tarefa.texto}</span>
          <button onClick={() => removerTarefa(tarefa.id)}>X</button>
        </div>
      ))}
    </div>
  );
}

Estado com Múltiplas Estruturas

function CarrinhoCompras() {
  const [carrinho, setCarrinho] = useState({
    itens: [],
    cupomDesconto: null,
    enderecoEntrega: {
      rua: '',
      cidade: '',
      cep: ''
    }
  });

  // Adicionar item ao carrinho
  const adicionarItem = (produto) => {
    setCarrinho(prevCarrinho => {
      const itemExistente = prevCarrinho.itens.find(
        item => item.id === produto.id
      );

      if (itemExistente) {
        // Incrementa quantidade se já existe
        return {
          ...prevCarrinho,
          itens: prevCarrinho.itens.map(item =>
            item.id === produto.id
              ? { ...item, quantidade: item.quantidade + 1 }
              : item
          )
        };
      } else {
        // Adiciona novo item
        return {
          ...prevCarrinho,
          itens: [...prevCarrinho.itens, { ...produto, quantidade: 1 }]
        };
      }
    });
  };

  // Aplicar cupom
  const aplicarCupom = (cupom) => {
    setCarrinho(prevCarrinho => ({
      ...prevCarrinho,
      cupomDesconto: cupom
    }));
  };

  // Atualizar endereço
  const atualizarEndereco = (campo, valor) => {
    setCarrinho(prevCarrinho => ({
      ...prevCarrinho,
      enderecoEntrega: {
        ...prevCarrinho.enderecoEntrega,
        [campo]: valor
      }
    }));
  };

  // Calcular total
  const calcularTotal = () => {
    const subtotal = carrinho.itens.reduce(
      (total, item) => total + (item.preco * item.quantidade),
      0
    );
    
    if (carrinho.cupomDesconto) {
      return subtotal * (1 - carrinho.cupomDesconto.percentual);
    }
    
    return subtotal;
  };

  return (
    <div>
      {/* Interface do carrinho */}
    </div>
  );
}

Padrões de Atualização Imutável

1. Spread Operator

// Objeto
const novoObjeto = { ...objetoAntigo, propriedade: novoValor };

// Array
const novoArray = [...arrayAntigo, novoItem];

2. Métodos de Array que Retornam Novo Array

// filter - remove itens
const filtrado = array.filter(item => item.id !== idParaRemover);

// map - atualiza itens
const atualizado = array.map(item => 
  item.id === idParaAtualizar ? { ...item, ...novosDados } : item
);

// concat - adiciona itens
const comNovosItens = array.concat(novosItens);

3. Evite Mutações

// ❌ ERRADO - muta o array original
array.push(novoItem);
array[0].nome = 'Novo Nome';
array.sort();

// ✅ CORRETO - cria novo array
setArray([...array, novoItem]);
setArray(array.map((item, i) => i === 0 ? { ...item, nome: 'Novo Nome' } : item));
setArray([...array].sort());

Dicas de Performance

1. Use Funções de Atualização

// Evita problemas de fechamento (closure)
setEstado(prevEstado => {
  // Use prevEstado ao invés de estado
  return novoEstado;
});

2. Normalize Dados Complexos

// Ao invés de arrays aninhados
const [dados, setDados] = useState([
  { id: 1, nome: 'Item', subitens: [{ id: 2, nome: 'Subitem' }] }
]);

// Considere normalizar
const [itens, setItens] = useState({
  1: { id: 1, nome: 'Item' },
  2: { id: 2, nome: 'Subitem', parentId: 1 }
});

3. Separe Estados Independentes

// Ao invés de um grande objeto
const [estado, setEstado] = useState({
  usuario: {},
  carrinho: [],
  configuracoes: {}
});

// Prefira estados separados
const [usuario, setUsuario] = useState({});
const [carrinho, setCarrinho] = useState([]);
const [configuracoes, setConfiguracoes] = useState({});