Componentes compostos com Context
Partilhar estado implícito entre um componente-pai e os seus filhos designados utilizando Context, modelando APIs como e .
Componentes compostos com Context é uma aula grátis de Frontend Academy no CoddyKit. Esta é a aula 1 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Frontend Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Frontend Academy inclui 4 aulas no total.
O que são componentes compostos
Componentes compostos são um conjunto de componentes relacionados, projetados para funcionar juntos como uma única unidade — como <select> + <option> do HTML. O componente pai compartilha um estado implícito com seus filhos específicos.
O objetivo: APIs mais limpas
Em vez de <Select options={[...]} value={x} onChange={...} />, escreva <Select><Option value="a">Apple</Option></Select>. A estrutura é declarativa e nativa do JSX.
Abordagem ingênua (problema)
Passar o estado por propriedades exige que o consumidor conecte tudo. Os filhos não sabem automaticamente sobre o estado do pai.
// Without compound pattern — verbose:
<Tabs activeIndex={0} onChange={setIndex}>
<TabList>
<Tab index={0}>Home</Tab>
<Tab index={1}>Profile</Tab>
</TabList>
</Tabs>Contexto como conector
O componente pai cria um contexto com o estado compartilhado e o fornece. Os filhos consomem o contexto — sem a necessidade de conectar propriedades explicitamente.
import { createContext, useContext, useState } from 'react';
const TabsContext = createContext(null);
export function Tabs({ children, defaultIndex = 0 }) {
const [activeIndex, setActiveIndex] = useState(defaultIndex);
return (
<TabsContext.Provider value={{ activeIndex, setActiveIndex }}>
<div className="tabs">{children}</div>
</TabsContext.Provider>
);
}Os componentes filhos consomem
Cada filho lê o contexto — sem passar propriedades pela árvore.
export function Tab({ index, children }) {
const { activeIndex, setActiveIndex } = useContext(TabsContext);
const isActive = activeIndex === index;
return (
<button
className={isActive ? 'active' : ''}
onClick={() => setActiveIndex(index)}
>
{children}
</button>
);
}
export function Panel({ index, children }) {
const { activeIndex } = useContext(TabsContext);
if (activeIndex !== index) return null;
return <div className="panel">{children}</div>;
}Propriedades estáticas para facilitar a descoberta
Anexe os subcomponentes ao componente pai para que os usuários os descubram pelo preenchimento automático.
Tabs.Tab = Tab;
Tabs.Panel = Panel;
// Usage:
<Tabs>
<Tabs.Tab index={0}>Home</Tabs.Tab>
<Tabs.Tab index={1}>Profile</Tabs.Tab>
<Tabs.Panel index={0}>Home content</Tabs.Panel>
<Tabs.Panel index={1}>Profile content</Tabs.Panel>
</Tabs>Exemplo real: Disclosure
Um componente Disclosure tem filhos Trigger e Panel que compartilham um estado aberto/fechado por meio do contexto.
function Disclosure({ children }) {
const [isOpen, setIsOpen] = useState(false);
return (
<DisclosureContext.Provider value={{ isOpen, setIsOpen }}>
<div>{children}</div>
</DisclosureContext.Provider>
);
}
function Trigger({ children }) {
const { isOpen, setIsOpen } = useContext(DisclosureContext);
return <button onClick={() => setIsOpen(o => !o)}>{children}</button>;
}
function Panel({ children }) {
const { isOpen } = useContext(DisclosureContext);
return isOpen ? <div>{children}</div> : null;
}Ganchos como API pública
Exporte um gancho personalizado para que os usuários possam criar seus próprios componentes com base nos seus.
export function useTabs() {
const ctx = useContext(TabsContext);
if (!ctx) throw new Error('useTabs must be used inside <Tabs>');
return ctx;
}Componentes compostos polimórficos
Permita que os componentes pai renderizem qualquer elemento por meio de uma propriedade as ou do padrão asChild (a abordagem do Radix UI). Isso permite que componentes compostos sejam combinados com JSX arbitrário.
Padrões de componentes compostos sem interface visual
Bibliotecas sem interface visual (Radix, Headless UI) fornecem componentes compostos sem estilização — com a lógica de acessibilidade incorporada; a estilização fica por sua conta.
Armadilha: inspeção de filhos
Um padrão mais antigo usava React.Children para inspecionar os filhos — uma abordagem frágil e instável. Prefira sempre o contexto para compartilhar estado.
Verificação rápida
Em um padrão de componentes compostos, como os componentes filhos se comunicam com o componente pai?
Recapitulação: componentes compostos
Componentes compostos permitem que partes relacionadas funcionem como uma unidade declarativa. Use Context para compartilhar estado — Provider no componente pai e useContext nos filhos. Anexe os subcomponentes como propriedades estáticas para facilitar a descoberta. Exporte um gancho personalizado como API pública. Radix e Headless UI são ótimas referências. Prefira o contexto à inspeção de Children.
Perguntas Frequentes
A aula “Componentes compostos com Context” é grátis?
Sim — o texto completo de “Componentes compostos com Context” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Frontend Academy, atualize para CoddyKit PRO. O curso de Frontend Academy inclui 4 aulas no total.
O que vou aprender em “Componentes compostos com Context”?
Partilhar estado implícito entre um componente-pai e os seus filhos designados utilizando Context, modelando APIs como e . Você pratica Frontend Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Frontend Academy?
Nenhuma experiência prévia é necessária. Frontend Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 4.
Quanto tempo leva a aula “Componentes compostos com Context”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Frontend Academy?
Sim. Cada aula de Frontend Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Componentes compostos com Context
- Propriedades de renderização e padrões HOC
- Portais para modais e dicas de contexto
- Limites de erros