⚛️
ChatGPT intermediate

Prompt para componentização avançada em React

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

2 usos React

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