Prompt para componentização avançada em React

Prompt gerado automaticamente para Componentização avançada em React

5.0
39 usos
ChatGPT
Usar no 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

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.

Compartilhe

Gostou deste prompt? Ajude outras pessoas a encontrá-lo!

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