Propriedades de renderização e padrões HOC
Passar uma função de renderização como propriedade para injetar a interface e envolver componentes em componentes de ordem superior para injetar comportamento sem modificar o original.
Propriedades de renderização e padrões HOC é uma aula grátis de Frontend Academy no CoddyKit. Esta é a aula 2 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.
Dois padrões clássicos de reutilização
Antes dos ganchos (React 16.8), reutilizar lógica com estado significava usar Componentes de ordem superior (HOCs) ou propriedades de renderização. Eles são raros em código novo, mas ainda aparecem em bases de código legadas e em muitas bibliotecas.
Propriedades de renderização — a ideia
Um componente aceita uma função como propriedade (comumente chamada de render ou children) e a chama com o estado interno. O consumidor decide o que renderizar com esse estado.
function Mouse({ render }) {
const [pos, setPos] = useState({ x: 0, y: 0 });
useEffect(() => {
const handler = (e) => setPos({ x: e.clientX, y: e.clientY });
window.addEventListener('mousemove', handler);
return () => window.removeEventListener('mousemove', handler);
}, []);
return render(pos);
}
// Usage:
<Mouse render={({ x, y }) => <p>{x}, {y}</p>} />children como função
A propriedade children também pode ser uma função — o mesmo padrão, com JSX mais limpo.
function Mouse({ children }) {
const [pos, setPos] = useState({ x: 0, y: 0 });
/* ... */
return children(pos);
}
<Mouse>
{({ x, y }) => <p>{x}, {y}</p>}
</Mouse>Componentes de ordem superior — a ideia
Um HOC é uma função que recebe um componente e retorna um novo componente com propriedades ou comportamento adicionais. É muito usado em connect() do Redux e withRouter() do React Router.
function withMouse(Component) {
return function WithMouse(props) {
const [pos, setPos] = useState({ x: 0, y: 0 });
useEffect(() => {
const handler = (e) => setPos({ x: e.clientX, y: e.clientY });
window.addEventListener('mousemove', handler);
return () => window.removeEventListener('mousemove', handler);
}, []);
return <Component {...props} mouse={pos} />;
};
}
// Usage:
const Position = ({ mouse }) => <p>{mouse.x}, {mouse.y}</p>;
const EnhancedPosition = withMouse(Position);
<EnhancedPosition />HOCs se compõem por encapsulamento
É possível empilhar HOCs, mas eles formam um “inferno de encapsuladores” difícil de depurar.
// Multiple HOCs:
const Enhanced = withRouter(connect(mapState)(withTranslation()(MyComponent)));
// Equivalent in modern React:
// const Enhanced = MyComponent (reads from hooks: useRouter, useSelector, useTranslation)Propriedades de renderização versus HOC
Propriedades de renderização: mais explícitas, amigáveis aos tipos e sem colisões de nomes. HOCs: mais declarativos, perdem os tipos estáticos dos componentes encapsulados sem os devidos cuidados, e podem ocorrer colisões de nomes de propriedades.
Por que os ganchos substituíram ambos
Ganchos personalizados alcançam o mesmo objetivo com menos cerimônia: sem componentes encapsuladores, sem argumentos de função aninhados e sem malabarismos com tipos. Os ganchos são a resposta idiomática em 2025.
// Custom hook equivalent of useMouse:
function useMouse() {
const [pos, setPos] = useState({ x: 0, y: 0 });
useEffect(() => {
const handler = (e) => setPos({ x: e.clientX, y: e.clientY });
window.addEventListener('mousemove', handler);
return () => window.removeEventListener('mousemove', handler);
}, []);
return pos;
}
// Usage:
const { x, y } = useMouse();Quando as propriedades de renderização ainda são melhores
Para componentes que precisam inserir marcação (não apenas estado) — por exemplo, listas virtualizadas que renderizam itens em posições específicas — as propriedades de renderização ainda são a opção natural.
function VirtualList({ items, itemHeight, renderItem }) {
const [scrollTop, setScrollTop] = useState(0);
const start = Math.floor(scrollTop / itemHeight);
const visible = items.slice(start, start + 20);
return visible.map((item, i) => renderItem(item, start + i));
}
<VirtualList items={data} itemHeight={40} renderItem={(item, i) => (
<Row key={i} data={item} />
)} />Boas práticas de HOC (quando necessário)
Se for necessário escrever um HOC: copie os métodos estáticos (hoist-non-react-statics), encaminhe referências (React.forwardRef) e mantenha o displayName para o DevTools.
Encaminhamento de referências em HOCs
Por padrão, os HOCs ocultam as referências — use forwardRef para que os consumidores ainda possam acessar a referência do componente subjacente.
function withLogger(Component) {
const Wrapped = React.forwardRef((props, ref) => {
console.log('rendering', Component.name);
return <Component {...props} ref={ref} />;
});
Wrapped.displayName = `withLogger(${Component.name})`;
return Wrapped;
}Reconhecendo padrões legados
Você encontrará HOCs e propriedades de renderização em: react-redux (API antiga), Apollo Client v2, react-router v5 (withRouter), Formik (Field) e styled-components (withTheme). Refatore para ganchos quando as APIs mais recentes dessas bibliotecas permitirem.
Verificação rápida
Qual padrão os ganchos substituíram em grande parte para compartilhar lógica com estado entre componentes React?
Recapitulação: propriedades de renderização e HOCs
Propriedades de renderização: função como propriedade que retorna JSX, explícita e amigável aos tipos. HOCs: função que encapsula um componente, usada por bibliotecas mais antigas (connect, withRouter). Ganchos personalizados substituíram ambos para lógica de estado. As propriedades de renderização ainda são melhores quando é necessário inserir uma marcação personalizada (listas virtualizadas). Ao escrever HOCs: use forwardRef, eleve os métodos estáticos e defina displayName.
Perguntas Frequentes
A aula “Propriedades de renderização e padrões HOC” é grátis?
Sim — o texto completo de “Propriedades de renderização e padrões HOC” é 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 “Propriedades de renderização e padrões HOC”?
Passar uma função de renderização como propriedade para injetar a interface e envolver componentes em componentes de ordem superior para injetar comportamento sem modificar o original. 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 2 de 4.
Quanto tempo leva a aula “Propriedades de renderização e padrões HOC”?
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