Render Props

Última atualização: 2026-11-03

Render Props Render Props

Render props significa passar o JSX que você quer renderizar para um componente como uma prop função: o componente possui a lógica e o estado, enquanto quem chama recebe os dados como argumento e decide o que renderizar. Isso desacopla a reutilização de lógica da customização de UI, e foi o padrão de reutilização mais comum antes de surgirem os hooks. Como os dados chegam como um argumento comum, uma única implementação pode servir a muitas interfaces bem diferentes sem saber nada sobre nenhuma delas.

Grupo	Padrões de Componentes
Tipo	Padrão

ℹ️ Informação O editor transpila JSX para JavaScript e renderiza a UI real na sandbox; os componentes são montados automaticamente — sem render manual.

📝 Sintaxe

function DataProvider({ render }) {
  const data = /* the data produced by the logic */
  return render(data)          // call the render function and hand the data back
}

// usage: <DataProvider render={data => <List items={data} />} />

Retorna：Sem valor de retorno; esta entrada descreve um padrão de codificação e não uma função.

▶ Exemplo

O exemplo roda direto: renderiza automaticamente ao expandir e edições valem na hora.

Saída：

A mesma lógica de Counter é renderizada em duas interfaces completamente diferentes, e os dois contadores acumulam de forma independente sem interferir um no outro.

▶ Experimente

💡 Pontos-chave

ℹ️ Informação Children também pode ser uma função — <Counter>{count => …}</Counter> — que é o mesmo mecanismo de uma render prop.

💡 Dica Extrair a lógica para um hook personalizado como useCounter costuma ser mais conciso do que render props, e os dois podem coexistir.

⚠️ Aviso Aninhar componentes de render props profundamente produz uma pirâmide de indentação; desde que surgiram os hooks, a maioria desses casos foi substituída.

Mais casos em breve.

📚 Tutoriais Relacionados

Composição de Componentes

Lição 8: render props e como a reutilização de lógica evoluiu.

❓ Perguntas Frequentes

P Render props e children função são a mesma coisa?

R O mecanismo é idêntico: você passa uma função como prop e o componente a chama com os dados. Um children função é apenas uma escrita mais compacta.

P Ainda precisamos de render props agora que existem os hooks?

R Hooks são melhores para a maior parte da reutilização de lógica, mas render props ainda cabem quando uma mesma lógica precisa renderizar interfaces muito diferentes e você quer assumir totalmente a view.

P A função de render é reconstruída a cada renderização?

R Sim, é uma arrow function inline. Um componente de render props só a chama, sem uma comparação rasa via memo, então geralmente não se torna um problema de desempenho.

Equipe Técnica Web-Tutorial

Uma plataforma de tutoriais mantida por diversos desenvolvedores. Cada tutorial é escrito e revisado por profissionais da área correspondente. Trabalhamos para manter nosso conteúdo preciso e confiável — se encontrar algum problema, avise-nos.

Sobre Nós

Render Props

Render Props Render Props

📝 Sintaxe

▶ Exemplo

💡 Pontos-chave

🏷️ Mais Padrões de Componentes

💡 Casos Relacionados

📚 Tutoriais Relacionados

❓ Perguntas Frequentes