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:
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.
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
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
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:
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
