React render props

Stored E-commerce
Dec 10, 2017 · 3 min read

Quando eu comecei a trabalhar na Stored, o Jan Cassio estava me mostrando o código de um dos repositórios de lá, e quando estava olhando vi um pattern que parecia um High Order Component, mas ele tinha me dito que era um pattern que ele tinha visto um brother falar, e chamavam de render prop.

Depois disso fiquei como:

Image for post
Image for post
simbolo da arminha com mão

Para entendermos esse pattern precisamos rever o motivo de porquê usamos o HoC (High Order Component) e olhar algumas coisas que usavamos no passado.


A pergunta chave disso tudo é:

“Como fazer reuso de código?”

Hmm… vamos voltar a época que a gente usava o e implementar um app que mostra na tela as coordenadas do mouse.

React.createClass

Agora pense que você quer reutilizar esse código para outro componente, quando lidavamos com o usavamos uma técnica chamada “mixins”, vamos criar um man chamado e ver como ficaria o reuso de código

Mixins com React.createClass

Até então a gente resolvia o problema, mas tinhamos alguns poréns…


HoC

Com a chegada as classes no ES6 os desenvolvedores React pararam de usar o e começaram a usar a feature que já era built-in.

Então além das classes do ES6 não suportarem mixins, exitiam outros problemas em usar eles, como o Dan Abramov falou em um artigo.

E então, os devs começaram a usar os High Order Components, técnica similar aos decorators.

Um HoC, é um markup que faz um wrap de um ou mais components, basicamente você decora ele :D

HoC

A elegância do código ficou zika, o que fez esse pattern ser muito adotado na comunidade.

Porém um dos rolês principais de usar os HoC na minha opnião, é a colisão de nomes, como você pode ver no exemplo acima, a possibilidade de props colidirem é grande, e esse problema ainda tornasse pior, já que o React não solta se uma prop for sobreposta :thinking_face:


Render props

Existe uma outra técnica para reuso de código, chamada pelo React Tranning de render props.

Resumindo render props, é basicamente, ao invés de “mixin in” ou decorar um componente para compartilhar o comportamento, é renderizar um componente com uma função passada por parâmetro que pode compartilhar o state.

e agora é sua vez de ficar assim:

Image for post
Image for post
Você fazendo simbolo da arminha com mão agora

O que acontece agora é que expõe o state para o e chama a props que é a função que eu tinha falado antes.

Bem parecido com o “children as a function” não é :D

Render prop é nome da técnica e não quer dizer que o nome da prop precisa ser render :)

Para você ver como esse pattern é poderoso, todo HoC pode ser implementado usando render props, mas o contrário não.

Um exemplo é a implementação do por render props

Uma coisa que render props também resolvem, é que agora passa a usar dynamic composition ao invés de static composition.

Assim, tomando proveito de todo lifecycle do React :D

Referências

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store