Codex Technomanticus

Plano — Galho React Design Patterns

Leitura de 5 min

Plano — Galho React Design Patterns (galho 2 do domínio React)

Objetivo

Criar o galho React Design Patterns no domínio multi-galho Tecnologia/React — um catálogo de referência dos padrões consolidados da indústria React, em 3 fases (Iniciado/Adepto/Magus), padrão capítulo, TS-first. Alvo: prep entrevistas internacionais, perfil Senior Fullstack. É o galho 2 da sequência do domínio React (após React core), parte da Onda A do Roadmap.

Tese: padrões em React são soluções reutilizáveis para problemas recorrentes de composição, reuso de lógica e inversão de controle. Em 2026, a maioria dos padrões clássicos (HOC, render props) foi absorvida por custom hooks — então o galho ensina os padrões vivos a fundo e os legados pelo que ainda aparecem (libs antigas, entrevista, casos específicos).

Princípio: catálogo auto-contido (redundância é reforço)

Diferente das outras trilhas, este galho é um catálogo de referência auto-contido (feedback_redundancia_entre_notas). Cada padrão é uma entrada completa: intenção (que problema resolve) → mecanismo → exemplo .tsx cheio (com tipagem mostrada inline, TS-first) → trade-offs e quando usar/evitar → quais bibliotecas o usam. Pode repetir conteúdo que vive em React core / TypeScript com React, mas sempre sob a ótica do padrão. Os links pras notas canônicas continuam (para o aprofundamento daquele tema), mas o leitor não precisa sair do catálogo para entender o padrão.

Domínio multi-galho — posição

Galho 2 de: 1. React core ✅ · 2. React Design Patterns (este) · 3. Next.js · 4. Ecossistema · 5. TypeScript com React (existe) · 6. Charts (existe).

Princípios

Fontes-base de pesquisa (consultar ao escrever cada padrão)

Cada nota cita as fontes que usou em ## Referências (proveniência), além das oficiais (react.dev) quando aplicável.

Fronteiras (seams — linkar E reforçar, não apenas adiar)

TemaTratamento aquiLinka
Tipagem profunda dos padrões (generics, satisfies)tipagem básica mostrada inlineTS-com-React 14, 13
Composição básica / arquitetura de apprecap sob ótica de padrãoReact core 08 e 24
Mecânica de hooks (regras, useState/useEffect)usada, não reensinada do zeroReact core 14, 09
Polymorphic (as prop)mençãoTS-com-React 13

Roster (12 notas — 3 / 6 / 3)

🟢 Iniciado — fundamentos de padrões (3)

  1. Padrões no React e a evolução — o que é um design pattern no contexto React; a história HOC → render props → custom hooks (por que os hooks venceram); como ler uma entrada deste catálogo (intenção/mecanismo/trade-off)
  2. Container vs Presentational — smart/dumb components; o padrão clássico e por que os hooks reescreveram a conversa
  3. Controlled vs Uncontrolled — quem é a fonte da verdade; value+onChange vs defaultValue+ref; quando cada um; componentes que suportam ambos

🟡 Adepto — os padrões do dia a dia (6)

  1. Custom hooks como padrão de reuso de lógica — o “vencedor” moderno; como substitui HOC e render props; composição de hooks; exemplos (useToggle, useFetch)
  2. Provider pattern — context + provider; provider + reducer (o “mini-Redux”); context module functions (Kent C. Dodds); custom hook que encapsula o context com guard
  3. Composição: slots, layout e children-as-API — children como slot; múltiplos slots via props de JSX; layout components; children-as-API; composição sobre configuração
  4. Compound components — <Select><Select.Option/></Select>; context interno compartilhado; flexibilidade vs acoplamento; como as libs de UI usam
  5. Render props e function-as-child — passar uma função que renderiza; quando ainda vale em 2026 vs custom hook
  6. Higher-Order Components (HOC) — o legado; withX; composição de HOCs; problemas (wrapper hell, props colisão); onde ainda aparece

🔴 Magus — padrões avançados e de biblioteca (3)

  1. State reducer + prop getters — inversão de controle; o usuário customiza o comportamento interno; o padrão do downshift/Kent C. Dodds
  2. Headless components e headless hooks — lógica sem apresentação; Radix, TanStack (Table/Query), Headless UI; separar comportamento de estilo; por que é o padrão dominante de libs em 2026
  3. Capstone — escolher o padrão certo e em entrevista — decision tree (qual padrão para qual problema), anti-patterns, mapa de revisão do galho, “como explicar em inglês”

Artefatos do domínio

  • Dicionário de React — já existe; enriquecer com verbetes dos padrões (HOC, render prop, compound component, prop getter, headless, etc.).
  • Índice do galho — index.md da subpasta Design Patterns/, MOC das 3 fases.
  • React/index.md — atualizar: galho React Design Patterns de ⬜ planejado → 🟩 (linkar o índice).

Execução

Pasta-alvo: 03-Dominios/Tecnologia/React/Design Patterns/ (notas 01 - … a 12 - … + index.md).

  1. Escrever o galho fresco (com pesquisa nas fontes-base), em ondas por fase, gate /verificar-nota por nota e /verificar-wikilinks por fase. Padrão subagente-por-nota.
  2. Teardown: criar índice do galho; atualizar React/index.md (marcar galho); verificar 0 quebras; atualizar Roadmap.
  3. (Opcional) Ciclo de qualidade: /plantar-duvidas → /colher-duvidas; /enriquecer-nota.

Fora de escopo (deste galho)

  • Next.js, Ecossistema (MUI/Mantine/TanStack Query) → galhos próprios.
  • Mecânica de hooks e fundamentos de React → galho React core (pronto).
  • Tipagem profunda dos padrões → galho TypeScript com React (existe).

Padrões e referências

Visão de gráfico

Backlinks