ReactSmallTips — Renderização condicional encapsulada

Este é o primeiro post de uma série de pequenas dicas que irei trazer para melhorar nossos códigos e aplicações feitas em React/React-native. Como primeiro tema, resolvi falar de uma abordagem simples que apliquei em alguns projetos e que vejo um ganho muito bom para fins de legibilidade e manutenibilidade e reuso de código. O nome pode até parecer algo um pouco complexo, mas a ideia é bem simples. Então, vamos ao que interessa.

Se você é um desenvolvedor React, você com certeza sabe o que é uma renderização condicional. Existem vários cenários em que, dado uma verificação, precisamos renderizar uma coisa ou outra. Um exemplo clássico seria uma aplicação onde existem tipos diferentes de usuários com permissões diferentes e você quer condicionar a renderização de alguns componentes dado o perfil do usuário que está logado. Quando determinada renderização condicional acontece somente uma vez, encapsula-la talvez seja uma esforço desnecessário. Logo, a dica aqui vale para cenários em que você precisará fazer a mesma condicional varias vezes em locais diferentes. A ideia de encapsular irá nos ajudar reduzir duplicação de código e facilitará a manutenção uma vez que, encapsulando, estaremos centralizando a lógica da renderização condicional. Vamos ao cenário.

Suponha que sua aplicação seja acessada por usuários que podem ter perfil de Manager ou de Employee, e em vários locais da aplicação você irá precisar condicionar quais componentes cada tipo de usuário pode ver na tela. Sendo assim, para não termos que ficar sempre fazendo a mesma coisa — lembrando a regra, chamando um context ou hook, fazer a condicional e tudo mais — vamos encapsular esse comportamento utilizando um componente wrapper e um hook.

Primeiramente precisamos da fonte que nos fala, em qualquer lugar da aplicação, qual o perfil do usuário logado. Para isso você pode usar algum controlador de estado global como Redux ou o context API do próprio React. Para simplificar, eu irei usar o context API.

1. Crie a interface que irá representar as informações que vamos precisar para saber o perfil do usuário logado

2. Crie a fonte que irá guardar e compartilhar esse estado entre os componentes (nesse caso o context)

3. Para que todos os componentes tenham acesso a esse estado, precisamos envolver a aplicação com o contexto que criamos.

4. Agora que todos os nossos componentes conseguem ter acesso ao roleInfo, via UserRoleContext, vamos criar um hook para facilitar pegar esse estado.

5. Agora vamos criar nosso componente que irá encapsular de fato nossa renderização condicionada ao usuário que estiver logado

6. Agora que todo o setup está pronto, vamos usar nossa renderização condicional encapsulada — RoleWrapper.

Note que, agora em qualquer lugar da aplicação que precisarmos condicionar uma renderização ao perfil do usuário, não precisaremos mais chamar o context, o hook nem fazer a condicional. O nosso wrapper já resolve tudo internamente, renderizando somente o que deve para os respectivos perfis de usuários. Veja o resultado

Considerações finais

Encapsular as nossas renderizações condicionais (quando é algo repetitivo no código) contribui para um código mais declarativo que é uma das premissas do React. Além de reduzir duplicação de código e facilitar a manutenção, pois agora tanto a lógica (hook/context) quanto a renderização (wrapper) estão centralizadas. Assim, se a regra mudar ou for incrementada, fica fácil saber onde alterar e onde aquilo irá refletir. O cenário exemplificado pode ser melhorado e a estratégia pode ser usada em outros cenários como por exemplo condicionar a renderização de um loading e/ou feedbacks de erro quando alguns componentes dependem de dados que vem de uma API.

Se você leu até aqui, agradeço e espero que a ideia passada seja útil em seus projetos. Mais detalhes do código no meu GitHub.

Cheers!