<h2>O Que São Render Props?</h2>
<p>Render Props é um padrão de design em React que consiste em passar uma função como prop para um componente, que então a chama para renderizar seu conteúdo. Essa função, chamada de "render prop", recebe dados do componente pai e retorna elementos React que serão renderizados. O nome vem justamente dessa prática: você está passando uma prop que é uma função responsável por renderizar algo.</p>
<p>A ideia principal é desacoplar a lógica de um componente (como gerenciamento de estado, efeitos colaterais, ou comunicação com APIs) da sua apresentação visual. O componente que possui a lógica não precisa decidir o que renderizar; quem está usando o componente é quem decide. Isso tornou o padrão extremamente popular nos anos 2017-2019, principalmente antes da consolidação do React Hooks.</p>
<h2>Por Que Render Props Fizeram Sentido?</h2>
<h3>O Contexto Histórico: Antes dos Hooks</h3>
<p>Antes do React 16.8 (que introduziu os Hooks), a reutilização de lógica entre componentes era um problema real. Higher-Order Components (HOCs) resolviam parte do problema, mas tinham desvantagens como wrapper hell e dificuldade em rastrear props. Render Props ofereceu uma alternativa mais explícita e flexível para compartilhar lógica sem criar camadas extras de componentes.</p>
<p>Imagine um cenário comum: você tinha um componente que gerenciava o estado de um mouse, buscava dados de uma API, ou controlava permissões de um usuário. Sem Hooks, a única forma elegante de reutilizar essa lógica em vários componentes visuais diferentes era através de Render Props ou HOCs. Render Props venceu em muitos casos porque era mais fácil de debugar e entender o fluxo de dados.</p>
<h2>Render Props na Prática: Exemplos Reais</h2>
<h3>Exemplo 1: Componente de Posição do Mouse</h3>
<p>Vamos criar um componente que rastreia a posição do mouse e passa essa informação para qualquer componente que queira usá-la:</p>
<pre><code class="language-jsx">import React, { useState, useEffect } from 'react';
class MousePosition extends React.Component {
constructor(props) {
super(props);
this.state = { x: 0, y: 0 };
}
componentDidMount() {
window.addEventListener('mousemove', this.handleMouseMove);
}
componentWillUnmount() {
window.removeEventListener('mousemove', this.handleMouseMove);
}
handleMouseMove = (event) => {
this.setState({ x: event.clientX, y: event.clientY });
};
render() {
return this.props.render(this.state);
}
}
// Usando o componente
function App() {
return (
<MousePosition
render={({ x, y }) => (
<div>
<p>Posição do mouse: ({x}, {y})</p>
<div
style={{
width: '50px',
height: '50px',
position: 'absolute',
left: x,
top: y,
backgroundColor: 'red',
borderRadius: '50%',
}}
/>
</div>
)}
/>
);
}
export default App;</code></pre>
<p>Repare que <code>MousePosition</code> não sabe o que renderizar. Quem determina a apresentação é quem o utiliza, através da prop <code>render</code>. Essa separação clara entre lógica e apresentação era a grande vantagem do padrão.</p>
<h3>Exemplo 2: Componente de Busca de Dados</h3>
<p>Vamos criar um componente que busca dados de uma API e deixa a renderização para o consumidor:</p>
<pre><code class="language-jsx">import React, { useState, useEffect } from 'react';
class DataFetcher extends React.Component {
constructor(props) {
super(props);
this.state = { data: null, loading: true, error: null };
}
componentDidMount() {
fetch(this.props.url)
.then((response) => response.json())
.then((data) => this.setState({ data, loading: false }))
.catch((error) => this.setState({ error, loading: false }));
}
render() {
return this.props.render(this.state);
}
}
// Usando o componente
function PostsList() {
return (
<DataFetcher
url="https://jsonplaceholder.typicode.com/posts?_limit=5"
render={({ data, loading, error }) => {
if (loading) return <p>Carregando...</p>;
if (error) return <p>Erro: {error.message}</p>;
return (
<ul>
{data.map((post) => (
<li key={post.id}>{post.title}</li>
))}
</ul>
);
}}
/>
);
}
export default PostsList;</code></pre>
<p>Novamente, o componente <code>DataFetcher</code> é um recipiente puro de lógica. A decisão sobre como exibir os dados fica com o consumidor.</p>
<h2>Render Props Versus Alternativas Modernas</h2>
<h3>Por Que Hooks Tornaram Render Props Menos Relevante</h3>
<p>O React Hooks, introduzido em 2019, ofereceu uma forma muito mais simples de reutilizar lógica. Em vez de criar um componente wrapper, você pode criar um custom hook. Compare:</p>
<pre><code class="language-jsx">// Com Render Props
<MousePosition
render={({ x, y }) => <div>X: {x}, Y: {y}</div>}
/>
// Com Hooks (alternativa moderna)
function MyComponent() {
const { x, y } = useMousePosition();
return <div>X: {x}, Y: {y}</div>;
}</code></pre>
<p>O código com Hooks é mais legível, menos aninhado (evita o "callback hell") e mais intuitivo. Um custom hook <code>useMousePosition()</code> faz a mesma coisa que o componente <code>MousePosition</code> com Render Props, mas de forma mais direta.</p>
<h3>Quando Render Props Ainda Fazem Sentido</h3>
<p>Apesar da popularidade dos Hooks, existem cenários específicos onde Render Props ainda são a escolha correta:</p>
<ol>
<li><strong>Componentes de terceiros baseados em classe</strong>: Se você está integrando uma biblioteca que usa componentes de classe e oferece Render Props, não há razão para refatorar se está funcionando bem.</li>
</ol>
<ol>
<li><strong>Lógica vinculada ao ciclo de vida visual</strong>: Alguns padrões de UI, como tooltips ou popovers que precisam posicionar-se dinamicamente com base em refs, podem ser mais naturais com Render Props do que com Hooks customizados.</li>
</ol>
<ol>
<li><strong>Biblioteca própria com suporte a múltiplas versões</strong>: Se sua biblioteca precisa suportar versões antigas do React (antes do 16.8), Render Props é a opção viável.</li>
</ol>
<ol>
<li><strong>Composição dinâmica complexa</strong>: Em casos onde a lógica e apresentação precisam estar fortemente sincronizadas e alternar entre componentes é necessário, Render Props pode ser mais explícito que Hooks.</li>
</ol>
<pre><code class="language-jsx">// Um caso onde Render Props ainda é elegante:
// Um componente de abas/tabs onde a lógica de qual aba está ativa
// precisa coordenar a renderização de múltiplos elementos
class Tabs extends React.Component {
constructor(props) {
super(props);
this.state = { activeTab: 0 };
}
render() {
const { activeTab } = this.state;
const { tabs } = this.props;
return (
<div>
<div className="tabs-header">
{tabs.map((tab, index) => (
<button
key={index}
onClick={() => this.setState({ activeTab: index })}
style={{
fontWeight: activeTab === index ? 'bold' : 'normal',
}}
>
{tab.label}
</button>
))}
</div>
<div className="tabs-content">
{this.props.render({ activeTab, tabs })}
</div>
</div>
);
}
}
// Uso:
function App() {
const tabsConfig = [
{ label: 'Home', content: 'Conteúdo da home' },
{ label: 'Sobre', content: 'Conteúdo sobre' },
];
return (
<Tabs
tabs={tabsConfig}
render={({ activeTab, tabs }) => (
<div>{tabs[activeTab].content}</div>
)}
/>
);
}</code></pre>
<p>Neste exemplo, a coordenação entre o header (botões) e o conteúdo é forte, e o Render Props deixa explícito que o consumidor tem controle total sobre como o conteúdo ativo é exibido.</p>
<h2>O Padrão "Children as a Function"</h2>
<p>Uma variação de Render Props que ainda é bastante usada é passar a função como <code>children</code> em vez de uma prop nomeada:</p>
<pre><code class="language-jsx">import React, { useState, useEffect } from 'react';
function WindowSize({ children }) {
const [size, setSize] = useState({ width: 0, height: 0 });
useEffect(() => {
const handleResize = () => {
setSize({ width: window.innerWidth, height: window.innerHeight });
};
window.addEventListener('resize', handleResize);
handleResize(); // Chamada inicial
return () => window.removeEventListener('resize', handleResize);
}, []);
return children(size);
}
// Uso:
function App() {
return (
<WindowSize>
{({ width, height }) => (
<div>
<p>Largura: {width}px</p>
<p>Altura: {height}px</p>
</div>
)}
</WindowSize>
);
}
export default App;</code></pre>
<p>Essa abordagem é particularmente legível quando você tem uma única função como children. Bibliotecas populares como <code>react-router</code> ainda usam variações desse padrão em certas APIs.</p>
<h2>Conclusão</h2>
<p>Render Props foi um padrão revolucionário que resolveu um problema real na era pré-Hooks do React. Ele forneceu uma forma explícita e flexível de separar lógica de apresentação, evitando o wrapper hell dos HOCs. No entanto, com a chegada dos Hooks, a maioria dos casos de uso foi simplificada drasticamente.</p>
<p>A lição principal é: <strong>Render Props não desapareceram, apenas perderam relevância como a ferramenta padrão</strong>. Eles ainda são apropriados em contextos específicos, principalmente quando você herda código que já os usa ou quando está criando bibliotecas que precisam oferecer máxima flexibilidade compositiva. A decisão entre Hooks e Render Props deve ser pragmática, considerando o contexto, a legibilidade do código e o público-alvo da sua solução.</p>
<p>Finalmente, entender Render Props é importante não apenas para manutenção de código legado, mas porque o padrão em si — a ideia de deixar a renderização nas mãos do consumidor — continua sendo uma poderosa estratégia de design que transcende frameworks e linguagens.</p>
<h2>Referências</h2>
<ul>
<li><a href="https://react.dev/reference/react" target="_blank" rel="noopener noreferrer">React Hooks Official Documentation</a></li>
<li><a href="https://legacy.reactjs.org/docs/render-props.html" target="_blank" rel="noopener noreferrer">Render Props Pattern - React Docs Archive</a></li>
<li><a href="https://www.freecodecamp.org/news/how-to-use-react-render-props-5de3f1ca2d1e/" target="_blank" rel="noopener noreferrer">Understanding React Render Props by Example</a></li>
<li><a href="https://kentcdodds.com/blog/how-to-use-react-hooks-for-shared-logic-between-components" target="_blank" rel="noopener noreferrer">When to use Render Props vs Custom Hooks</a></li>
<li><a href="https://frontendmasters.com/courses/advanced-react-patterns/" target="_blank" rel="noopener noreferrer">Advanced React Component Patterns - Frontend Masters</a></li>
</ul>
<p><!-- FIM --></p>