React Patterns — Começando pelo Render Props
Você já deve ter ouvido um monte de gente falar sobre “padrões de código no JavaScript (React, specially)”. Mas você sabe o que são padrões de código? O que são React Patterns e como eles se aplicam?
Então vamos do começo, o que é um padrão de software? Na engenharia de software, um padrão de design de software é, geralmente, uma solução reutilizável para um problema comum em um determinando contexto.
Seguindo nesse ponto de vista, o que é um React Pattern? Simples! É a aplicação de um padrão (como o próprio nome já diz) na escrita dos seus components React! :) .
A aplicação de patterns gera unicidade, clareza e manutenibilidade no código além de facilitar a reutilização (uma vez que a estrutura fica pré definida com o pattern).
A utilização de patterns também te auxilia a atingir um DOM mais consistente, sem side effects não desejados e com uma interface clara a nível de engenharia, onde se possa identificar quem é o quê e o que faz, uma vez que tudo deve seguir o mesmo caminho** e já tem lugar pré definido.
Hoje começaremos pelo belo e polêmico Render Props, vamos lá!.
* (Each case is a case) — Isto significa que cada pattern foi escrito com o intuito de propor uma solução a um problema já existente, analise a sua situação e o que cada pattern oferece e defende, encontre o melhor aliado para o seu caso e seja
feliz.
** Existe a possibilidade de precisarmos implementar padrões diferentes ou ainda variá-los para ter maior compatibilidade com o projeto em que estamos trabalhando.
Render props
Segundo a documentação oficial do facebook, a definição do termo render props é:
The term “render prop” refers to a simple technique for sharing code between React components using a prop whose value is a function.
A component with a render prop takes a function that returns a React element and calls it instead of implementing its own render logic.
Que traduzindo para o português que dizer:
“O termo render prop se refere a uma técnica simples de compartilhar código entre components react utilizando uma prop, cujo valor é uma função”.
O que isso quer dizer?
Isso quer dizer que: Vamos passar uma função para dentro do render do nosso componente pai (data provider, wrapper, parent, container, jesus) uma função que vai ser responsável por renderizar o component UI desse container.
Isso vai nos permitir compartilhar os nossos métodos e props que desejarmos para UI passando apenas um nível para baixo**.
**Pode ser mais, depende da sua arquitetura.
Pros
- Completamente declarativo, você usa apenas react components e props. A magia fica por sua conta
- Se o component que utiliza as render props precisar renderizar novamente, apenas o que está definido na função de render dele é executado.
Contras
- Se você precisar acessar qualquer dado fora do render (
getDerivedStateFromPropsou qualquer outro método do lifecycle que não o render) você não vai conseguir por quê tudo o que você passa pro component fica conectado ao escopoYa :P da render function.
Indicação de uso
Geralmente, se você precisa englobar o seu component com alguma lógica recursiva ou iterativa é uma boa ideia se usar o render props. O RequestAnimationFrame component é um bom exemplo disso por quê: Dentro do seu source code conseguimos identificar de maneira fácil quem é o nosso host e como ele compartilha os seus métodos e props com o seu InnerComponent.
Além disso também é uma boa ideia usar em situações de:
- Components que seguem o padrão de container/view (Smart/Dumb)
- Components que acessem a React Context API.
A parte prática
Agora que vocês já sabem o que é e pra que server o padrão de escrita usando Render Props, vamos fazer um exemplo prático para marcar na memória!
Um super, inovador e diferente… contador xD
Nada de mágico na definição do que vamos fazer, uma função de soma, uma função de subtração e é só :).
Primeiro vamos começar pelo CounterWrapper:
Ele é responsável por ser o host do nosso counter, nele o estado e os métodos permanecerão, livres de preocupações de interface (Dê a César o que é de César).
Agora o nosso CounterUI que vai apenas consumir e compartilhar informações com o wrapper:
Agora exportando like a boss temos o Counter:
Revisão
Render props é um padrão poderoso que te permite compartilhar código e funcionalidades entre components de maneira elegante, ajuda a manter o código limpo e auxilia na extração dos métodos e identificação de tipos de components.
Sim, render props é muito parecido com HOC, e com o mesmo propósito mas com uma abordagem mais clean e um pouco mais leve.
Vale ressaltar o que disse no começo, não adianta usar pattern como bala de prata, cada caso é um caso e vida que segue.
Código da aplicação em:
Obrigado, e até a próxima!
