<h2>Compound Components</h2>
<p>Compound Components é um padrão onde componentes trabalham em conjunto para gerenciar estado compartilhado. Cada componente filho é simples, mas juntos formam uma unidade funcional completa. Este padrão melhora a legibilidade do código e oferece flexibilidade sem expor lógica complexa.</p>
<p>O segredo está em usar <code>React.cloneElement</code> ou Context API para compartilhar estado entre componentes irmãos. Veja um exemplo prático de um componente de Acordeão:</p>
<pre><code class="language-jsx">const Accordion = ({ children }) => {
const [activeId, setActiveId] = React.useState(null);
return (
<div className="accordion">
{React.Children.map(children, child =>
React.cloneElement(child, { activeId, setActiveId })
)}
</div>
);
};
const AccordionItem = ({ id, title, children, activeId, setActiveId }) => {
const isActive = activeId === id;
return (
<div className="accordion-item">
<button onClick={() => setActiveId(isActive ? null : id)}>
{title}
</button>
{isActive && <div className="accordion-content">{children}</div>}
</div>
);
};
// Uso
<Accordion>
<AccordionItem id="1" title="Seção 1">Conteúdo 1</AccordionItem>
<AccordionItem id="2" title="Seção 2">Conteúdo 2</AccordionItem>
</Accordion></code></pre>
<p>A vantagem é que o usuário controla a estrutura HTML sem lidar com props complexas. Mantém a interface clara e intuitiva.</p>
<h2>Render Props</h2>
<p>Render Props é uma técnica onde um componente recebe uma função como prop, que retorna JSX. Essa função tem acesso ao estado interno do componente, permitindo máxima flexibilidade sem precisar criar componentes derivados. É especialmente útil para compartilhar lógica entre componentes que renderizam de formas diferentes.</p>
<p>Aqui está um exemplo de um componente que gerencia estado de mouse:</p>
<pre><code class="language-jsx">const MouseTracker = ({ children }) => {
const [position, setPosition] = React.useState({ x: 0, y: 0 });
const handleMouseMove = (e) => {
setPosition({ x: e.clientX, y: e.clientY });
};
return (
<div onMouseMove={handleMouseMove} style={{ height: '100vh' }}>
{children(position)}
</div>
);
};
// Uso
<MouseTracker>
{({ x, y }) => (
<div>
Posição do mouse: X={x}, Y={y}
<div style={{ left: x, top: y, position: 'absolute' }}>🎯</div>
</div>
)}
</MouseTracker></code></pre>
<p>O padrão oferece total controle sobre como os dados são renderizados. Porém, pode levar ao "callback hell" se mal estruturado. Use Render Props quando precisar de máxima flexibilidade de renderização.</p>
<h2>Higher-Order Components (HOCs)</h2>
<p>Um HOC é uma função que recebe um componente e retorna um novo componente aprimorado com funcionalidade adicional. É um padrão poderoso para reutilizar lógica, mas deve ser usado com cuidado pois pode complicar a rastreabilidade de props. Ideal para adicionar comportamentos transversais como autenticação ou temas globais.</p>
<p>Veja um exemplo prático de HOC para autenticação:</p>
<pre><code class="language-jsx">const withAuth = (WrappedComponent) => {
return (props) => {
const [isAuthenticated, setIsAuthenticated] = React.useState(false);
React.useEffect(() => {
// Simular verificação de autenticação
const token = localStorage.getItem('authToken');
setIsAuthenticated(!!token);
}, []);
if (!isAuthenticated) {
return <div>Acesso negado. Faça login primeiro.</div>;
}
return <WrappedComponent {...props} />;
};
};
const Dashboard = () => <h1>Bem-vindo ao Dashboard</h1>;
const ProtectedDashboard = withAuth(Dashboard);
// Uso
<ProtectedDashboard /></code></pre>
<p>HOCs funcionam bem para lógica transversal, mas a composição de múltiplos HOCs pode criar problemas de performance e readability. Considere usar Hooks customizados como alternativa mais moderna.</p>
<h3>Comparação: Quando Usar Cada Um</h3>
<ul>
<li><strong>Compound Components</strong>: Interface clara, múltiplos componentes relacionados, máximo controle estrutural.</li>
<li><strong>Render Props</strong>: Compartilhar estado dinamicamente, diferentes formas de renderizar dados.</li>
<li><strong>HOCs</strong>: Adicionar funcionalidade a componentes existentes, lógica transversal como logging ou autenticação.</li>
</ul>
<p>O React moderno privilegia <strong>Custom Hooks</strong> sobre esses padrões, mas todos ainda têm casos de uso válidos. A escolha depende da complexidade, legibilidade e manutenibilidade do seu projeto.</p>
<h2>Conclusão</h2>
<p>Os três padrões avançados em React—Compound Components, Render Props e HOCs—oferecem formas elegantes de gerenciar complexidade. Compound Components priorizam clareza estrutural; Render Props oferecem máxima flexibilidade; HOCs adicionam funcionalidade transversal. Domine-os não para usá-los em tudo, mas para escolher a solução certa em cada contexto. Na prática moderna, combine com Custom Hooks para código mais legível e eficiente.</p>
<h2>Referências</h2>
<ul>
<li><a href="https://react.dev/reference/react/cloneElement" target="_blank" rel="noopener noreferrer">React Documentation - Higher-Order Components</a></li>
<li><a href="https://kentcdodds.com/blog/advanced-react-patterns" target="_blank" rel="noopener noreferrer">Advanced React Patterns - Kent C. Dodds</a></li>
<li><a href="https://react.dev/learn" target="_blank" rel="noopener noreferrer">Render Props Pattern - Official React Docs</a></li>
<li><a href="https://blog.logrocket.com" target="_blank" rel="noopener noreferrer">Compound Components Explained - LogRocket</a></li>
<li><a href="https://patterns.dev/posts/compound-pattern" target="_blank" rel="noopener noreferrer">React Design Patterns - Patterns.dev</a></li>
</ul>