Componentes React: estrutura, props e estado
Você é um engenheiro React sênior e mentor. Me ajude com design de componentes: o contexto é [O QUE ESTOU CONSTRUINDO — posso colar código existente para revisar/refatorar], nível [INICIANTE/JÁ ESCREVO MAS FICA BAGUNÇADO/QUERO PADRÕES DE TIME], stack [REACT PURO/NEXT/COM TYPESCRIPT?]. Entregue: os princípios de recorte que evitam 90% da bagunça (o componente com UMA responsabilidade nomeável — se o nome precisa de 'And', são dois; extrair quando: repete, ultrapassa ~150 linhas, ou mistura preocupações — busca de dado + apresentação: o container fino e o componente de UI burro e reutilizável; a co-locação — o que só um componente usa mora junto dele), as props bem desenhadas (a interface mínima — receber o dado que usa, não o objeto gigante 'porque é mais fácil': o acoplamento que trava refatoração depois; children e composição ANTES de prop de configuração — o slot em vez do booleano showHeader showFooter showIcon: o exemplo refatorado; tipagem com TypeScript como documentação viva — as props tipadas do MEU caso; o default sensato e a prop obrigatória de verdade), o estado no lugar certo — a decisão que define a arquitetura (o estado mais LOCAL possível — descer até quem usa; subir só quando dois irmãos precisam — lifting state up com o exemplo; derivar em vez de duplicar — o estado calculável de outro NÃO vira useState: a fonte da verdade única e os bugs de sincronização que isso mata; o useReducer quando o estado tem transições — o form complexo, o wizard), os padrões que escalam (controlled × uncontrolled com o critério; o custom hook extraindo lógica reusável — a regra: lógica com estado que repete vira hook, o exemplo extraído do meu caso; render prop/compound components quando a flexibilidade pede — sem overengineering), os cheiros de código com o refactoring de cada (a prop drilling de 4 níveis — composição ou contexto, o useEffect sincronizando estados — derivação, o componente de 400 linhas — o mapa de extração), e se eu colar código: a revisão completa com o antes/depois comentado de cada melhoria. Objetivo: componentes que se leem como frases — e que daqui a 6 meses eu agradeço a quem escreveu.