Arquitetura de componentes sem componente Deus

Um componente não fica ruim porque tem muitas linhas; ele fica difícil quando mistura responsabilidades que mudam por motivos diferentes. Uma boa arquitetura começa separando dados, ações e apresentação em fronteiras compreensíveis.

import { useState } from 'react';

export default function ProductPage({ products }) {
  const [query, setQuery] = useState('');
  const filtered = products.filter((product) =>
    product.name.toLowerCase().includes(query.toLowerCase()),
  );

  return (
    <main>
      <SearchField value={query} onChange={setQuery} />
      <ProductCount count={filtered.length} />
      <ProductList products={filtered} />
    </main>
  );
}

function SearchField({ value, onChange }) {
  return (
    <input
      aria-label="Buscar produtos"
      value={value}
      onChange={(event) => onChange(event.target.value)}
    />
  );
}

function ProductList({ products }) {
  return (
    <ul>
      {products.map((product) => (
        <li key={product.id}>{product.name}</li>
      ))}
    </ul>
  );
}

ProductPage coordena o estado da busca porque dois filhos dependem dele. SearchField cuida da interação do campo. ProductList só recebe uma coleção e renderiza. Nenhum componente precisa conhecer toda a aplicação.

Mini missão: raio-x do componente grande

Pegue um componente que parece bagunçado e marque cada trecho com uma etiqueta: estado, evento, cálculo, efeito, lista, formulário ou visual. Depois extraia só uma parte que tenha nome claro. O objetivo não é fatiar tudo; é encontrar uma fronteira que deixe o próximo passo mais óbvio.

• Coloque o estado perto de quem usa, subindo apenas quando precisa ser compartilhado.
• Separe responsabilidades que mudam por motivos diferentes.
• Prefira composição: a um "componente Deus" cheio de condicionais e props sem relação.

Dica: antes de extrair um componente, tente dar um nome para a responsabilidade. Se o nome só for ParteDeCima, talvez a divisão ainda não esteja clara.

Agora você tem repertório para o terceiro projeto: Pokédex em React (pokedex-react), que combina API, loading/erro, filtros, favoritos e reutilização de lógica.

No próximo nó, vamos aprender a investigar quando alguma coisa não se comporta como você esperava.