React render props

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:

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 React.createClass 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 React.createClass usavamos uma técnica chamada “mixins”, vamos criar um man chamado mouseMixine 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 React.createClasse 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 warnse 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:

Você fazendo simbolo da arminha com mão agora

O que acontece agora é que <Mouse>expõe o state para o <App>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 withMouse 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