Comprehensive guide to React component patterns used in the Plataforma B2B de treinamento técnico corporativo educational platform. This skill covers functional components with hooks, composition patterns, state management, props flow, and error handling strategies essential for building maintainable React applications.
Learn how to create reusable, testable components following React best practices while avoiding common antipatterns like prop drilling, unnecessary class components, and improper state management. The skill emphasizes composition over inheritance, unidirectional data flow, and separation of concerns.
Real-world examples are taken directly from the project codebase, including CLearningSystem, BashLearningSystem, Breadcrumb, AreaCard, and FlashcardModal components. Each pattern is demonstrated with production code showing how architectural decisions were implemented in a 5,500+ line React application with 17 components.
Key topics include functional components (vs class components), React Hoo
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
A direct command skips the review prompt. Inspect the source before running it.
Comprehensive guide to React component patterns used in the Plataforma B2B de treinamento técnico corporativo educational platform. This skill covers functional components with hooks, composition patterns, state management, props flow, and error handling strategies essential for building maintainable React applications.
Learn how to create reusable, testable components following React best practices while avoiding common antipatterns like prop drilling, unnecessary class components, and improper state management. The skill emphasizes composition over inheritance, unidirectional data flow, and separation of concerns.
Real-world examples are taken directly from the project codebase, including CLearningSystem, BashLearningSystem, Breadcrumb, AreaCard, and FlashcardModal components. Each pattern is demonstrated with production code showing how architectural decisions were implemented in a 5,500+ line React application with 17 components.
Key topics include functional components (vs class components), React Hooks (useState, useEffect, custom hooks), component composition strategies, props vs Context API decision-making, controlled components for forms, error boundaries for resilience, and testing patterns with Vitest and Testing Library.
This skill is essential for understanding the system's component architecture, contributing new features, refactoring duplicated code (current 25% duplication target: <10%), and maintaining consistency across the 227-module educational platform. Includes troubleshooting guides for common React issues encountered during development.
Esta skill documenta todos os padrões de componentes React utilizados no Plataforma B2B de treinamento técnico corporativo, um sistema educacional com 17 componentes React, 227 módulos educacionais e 5 sistemas integrados de aprendizado.
O que você vai aprender:
Como criar componentes funcionais reutilizáveis e testáveis
Quando usar hooks vs. Context API vs. props drilling
Padrões de composição (composition over inheritance)
Estratégias de state management local
Error boundaries e tratamento de erros
Testes de componentes com Vitest e Testing Library
Por que esta skill é importante:
✅ Consistência: Garante que novos componentes seguem os mesmos padrões existentes
✅ Manutenibilidade: Reduz duplicação de código (meta: 25% → <10%)
✅ Testabilidade: Componentes funcionais são mais fáceis de testar
Por quê: React depende de referências para detectar mudanças. Mutação direta quebra isso.
3. useEffect sem Array de Dependências
❌ Não fazer:
useEffect(() => {
fetchData(); // ⚠️ Roda em todo render!
});
✅ Fazer:
useEffect(() => {
fetchData();
}, []); // ✅ Roda apenas uma vez (mount)// Ou com dependênciasuseEffect(() => {
fetchData(courseId);
}, [courseId]); // ✅ Roda quando courseId muda
Por quê: Sem array de dependências, effect roda em todo render (performance ruim).
// Context API para dados globaisconstUserContext = createContext();
<UserContext.Providervalue={user}><App><Layout><Sidebar><Menu><UserInfo /> {/* acessa via useContext */}
</Menu></Sidebar></Layout></App></UserContext.Provider>
Por quê: Props drilling profundo é difícil de manter. Context é melhor para dados globais.
5. Inline Functions em Props (Performance)
❌ Evitar em listas grandes:
{lessons.map(lesson => (
<LessonItemkey={lesson.id}onClick={() => handleClick(lesson.id)} // ⚠️ Nova função a cada render
/>
))}
Arquivo: Problema comum em CLearningSystem.jsx:90, BashLearningSystem.jsx:85
Problema 2: "Warning: Each child in a list should have a unique key prop"
Sintoma:
Warning: Each child in a list should have a unique "key" prop.
Causa: Esqueceu de adicionar prop key ao mapear array.
Solução:
// ❌ Erro
{lessons.map(lesson => (
<LessonItemtitle={lesson.title} />
))}
// ✅ Solução: Usar ID único
{lessons.map(lesson => (
<LessonItemkey={lesson.id}title={lesson.title} />
))}
// ⚠️ Evitar usar index (exceto se lista estática)
{lessons.map((lesson, index) => (
<LessonItemkey={index} {...lesson} />// OK apenas se lista não muda
))}
Problema 3: "Maximum update depth exceeded"
Sintoma:
Error: Maximum update depth exceeded. This can happen when a component
repeatedly calls setState inside componentWillUpdate or componentDidUpdate.
Causa: useEffect sem dependências corretas causando loop infinito.
Solução:
// ❌ Loop infinitouseEffect(() => {
setData(data + 1); // ⚠️ Atualiza data, que causa re-render, que roda effect novamente
});
// ✅ Solução 1: Array de dependências vaziouseEffect(() => {
setData(1);
}, []); // Roda apenas uma vez// ✅ Solução 2: Dependências corretasuseEffect(() => {
if (shouldUpdate) {
setData(newValue);
}
}, [shouldUpdate]); // Roda apenas quando shouldUpdate muda
Problema 4: Estado não atualiza imediatamente
Sintoma:
const [count, setCount] = useState(0);
consthandleClick = () => {
setCount(count + 1);
console.log(count); // ⚠️ Ainda mostra valor antigo!
};
Causa: setState é assíncrono. Valor atualizado só disponível no próximo render.
Solução:
// ✅ Usar functional update se depende do valor anteriorconsthandleClick = () => {
setCount(prev => {
console.log(prev); // Valor mais recentereturn prev + 1;
});
};
// ✅ Ou usar useEffect para reagir a mudançasuseEffect(() => {
console.log('Count atualizado:', count);
}, [count]);
Problema 5: Component re-renderiza muitas vezes
Sintoma: Performance ruim, componente renderiza 10+ vezes por interação.
Diagnóstico: Usar React DevTools Profiler.
Causas comuns:
Inline functions em props (criar nova função a cada render)
Objetos/arrays criados inline em props
Context que muda frequentemente
Soluções:
// ❌ Causa re-rendersfunctionParent() {
return<Childconfig={{foo: 'bar' }} />; // ⚠️ Novo objeto a cada render
}
// ✅ Solução: useMemo para valores computadosfunctionParent() {
const config = useMemo(() => ({ foo: 'bar' }), []);
return<Childconfig={config} />;
}
// ✅ Solução: React.memo para componentes purosconstChild = React.memo(functionChild({ config }) {
return<div>{config.foo}</div>;
});
Arquivo útil:.claude/skills/vite-build-optimization/ para análise de bundle
📍 Você está em:.claude/skills/react-components-patterns/SKILL.md📅 Criado em: 2025-11-16
👤 Mantido por: João Pelegrino + Claude Code
🎯 Uso: Referência para criar e manter componentes React no projeto
🔄 Última auditoria: 2025-11-16
📊 Auto-discovery score: TBD (testar após criação)
