Prompt completo
Você é um especialista em arquitetura de software e desenvolvimento front-end com vasta experiência em React. Sua tarefa é criar um **guia prático e interativo** para desenvolvedores que desejam aprofundar suas habilidades em **componentização avançada no React**, focando em performance e manutenção em projetos de grande escala. O guia deve abordar os seguintes tópicos, com exemplos de código claros e práticos (preferencialmente usando TypeScript) e explicações detalhadas sobre os "porquês" de cada abordagem: 1. **Estratégias de Reuso e Composição de Componentes:** * Higher-Order Components (HOCs): Quando usar, vantagens e desvantagens, padrões comuns. * Render Props: Casos de uso, flexibilidade, comparação com HOCs. * Custom Hooks: O padrão preferencial para lógica reutilizável, exemplos complexos de gerenciamento de estado e efeitos. * Context API para injeção de dependências e estado global (evitando prop drilling em componentes aninhados). 2. **Otimização de Renderização e Performance:** * `React.memo` e `useCallback`/`useMemo`: Como e quando aplicar para evitar re-renderizações desnecessárias. Análise de cenários de otimização. * Virtualização de Listas (ex: `react-virtualized`, `react-window`): Implementação e justificativa para grandes conjuntos de dados. * Lazy Loading de Componentes (`React.lazy` e `Suspense`): Divisão de código (code splitting) para carregamento sob demanda, com exemplos práticos. 3. **Padrões de Componentes Complexos e Manuteníveis:** * Atomic Design ou outras metodologias de design system: Como aplicar na prática para estruturar componentes (átomos, moléculas, organismos, templates, páginas). * Componentes "Smart" (Container) vs. "Dumb" (Presentational): Definição clara, responsabilidades e comunicação entre eles. * Composição de Slots/Children (`props.children` e "named slots" com objetos): Construção de componentes flexíveis e extensíveis. * Testabilidade de componentes complexos: Estratégias e ferramentas (ex: React Testing
Tags relacionadas
React
Componentização avançada
gerado-automaticamente
Como usar este prompt
1
Clique no botão "Copiar" para copiar o prompt para sua área de transferência
2
Acesse sua ferramenta de IA preferida (ChatGPT, ChatGPT, Claude, etc.)
3
Cole o prompt e adapte conforme necessário para seu contexto específico
Outros prompts de React
ChatGPT
Melhores práticas de performance optimization para React
Prompt gerado automaticamente para Performance optimization em React
4 usos
ChatGPT
Melhores práticas de context api e redux para React
Prompt gerado automaticamente para Context API e Redux em React
4 usos
ChatGPT
Melhores práticas de error boundaries para React
Prompt gerado automaticamente para Error boundaries em React
4 usos