Prompt para componentização avançada em React
Prompt gerado automaticamente para Componentização avançada em React
5.0
39 usos
ChatGPT
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
Como Usar este Prompt
1
Clique no botão "Copiar Prompt" para copiar o conteúdo completo.
2
Abra sua ferramenta de IA de preferência (ChatGPT e etc.).
3
Cole o prompt e substitua as variáveis (se houver) com suas informações.
Outros prompts de React
Continue explorando prompts nesta categoria.
Melhores práticas de performance optimization para React
Prompt gerado automaticamente para Performance optimization em React
Melhores práticas de context api e redux para React
Prompt gerado automaticamente para Context API e Redux em React
Melhores práticas de error boundaries para React
Prompt gerado automaticamente para Error boundaries em React