Cansado de duplicar código de lógica? Apresento o padrão Render Props!
🚀O que é?
Render Props é uma técnica onde um componente recebe uma função (a prop render) que ele chama para renderizar a saída. O componente provider (o que recebe a função) fornece o estado ou comportamento (ex: coordenadas do mouse, estado de loading), e a função decide o que mostrar.
🎯 Quando Usar?
Compartilhamento de Lógica (Não Visual): Reutilize código que lida com dados assíncronos, eventos de mouse, ou subscriptions em diferentes componentes sem reescrever a lógica.
Exemplo: Um componente que passa as coordenadas $(x, y)$ para a prop render:
JavaScript
<MouseTracker render={({ x, y }) => (
<p>Mouse em: ({x}, {y})</p>
)}/>
💡 A Evolução: Custom Hooks
Com a chegada dos Hooks, o Custom Hook se tornou a ferramenta preferencial e mais limpa para a maioria dos casos de compartilhamento de lógica de estado (useState, useEffect).
👉 Conclusão: Render Props é um padrão elegante que separa comportamento de visualização, mas os Custom Hooks são a solução moderna e mais comum para o reuso de lógica no React
Top comments (0)