#001 Como lidar de uma forma mais feliz com classes CSS condicionais no React? — Dicas de React

Mario Souto
Apr 8, 2019 · 3 min read

Esse é o primeiro post de uma série onde irei abordar diversos tópicos comuns que passamos no desenvolvimento com React.
Trabalhando com a ferramenta nos últimos anos eu passei vários perrengues, frustrações e algumas outras sensações. Nesse post eu vou compartilhar uma solução que particularmente acho interessante para trabalhar com classNames condicionais de um jeito mais elegante.

Image for post
Image for post
Logo do React, CSS e um preview de como adicionar classes condicionais usando a lib classNames

Antes de mais nada, deixo aqui a dica pra você acompanhar mais conteúdos meus no canal Dev Soutinho no YouTube :D

O que eu preciso pra ler esse post?

Esse post exige um conhecimento bem introdutório sobre React (criação e uso de componentes, eventos e state). É legal você ter um conhecimento de JavaScript (objetos, arrays e como manipular esses tipos de dados).

Mãos na Massa

Pra facilitar minha vida na explicação, aproveitei o exemplo do formulário do Twitelum, .

Image for post
Image for post
Validação de formulário no estilo do twitter feita em React

Para determinar o comportamento do contador de caracteres existe o seguinte trecho de código:

Sempre que preciso adicionar classes de forma condicional eu acho que o código acaba ficando com uma legibilidade um pouco comprometida, quando trabalhei com angular, [ngClass]="{ nomeDaClasse: expression (Algo que ao final será evaluado como true/false) }".

Fiquei bem triste quando vi que na documentação do React não existia algo do gênero, e resolvi tentar criar minha própria implementação de como poderia fazer algo nessa linha:

A função classNames() por debaixo dos panos pega todos os argumentos passados e se eles forem uma string, uma classe CSS é adicionada normalmente, se um objeto for passado eu faço uma analise filtrando as keys que possuem true e adiciono a classe com o valor correspondente da key:

Com isso foi possível deixar um pouco mais legível trabalhar com classes condicionais em meus componentes.

Recentemente descobri que existe uma lib que faz a mesma coisa, então se preferir usar ela por já ter toda uma cobertura de testes e tudo mais, fique a vontade: .

Contras dessa solução

A nível de performance, se você for muito crítico realmente, fazer uns loops a mais, criar algumas funções no tempo de render do componente vai ter um certo custo que é difícil de medir o quanto ele impacta para o usuário (tanto que na ele faz tudo via for pra evitar esse custo). Nas aplicações que trabalhei e usei a estratégia acima, não cheguei a pegar nenhum gargalho em cima disso que comprometesse a experiência do usuário na página, e como normalmente só adiciono uma ou duas classes CSS não chega a ser um fazer o filter dentro do map.

Conclusão

Levando em consideração a legibilidade do código, eu prefiro bastante lidar com classes condicionais nesse formato, tendo ciência dos pontos que podem ser um trade-off. E você faz isso de forma diferente? Compartilha ai comigo nos comentários :)

Se você quiser o código usado no projeto pra testar ele tá aqui:

Espero que tenha gostado do post, em breve trarei mais dicas, se curtiu e quiser saber em primeira mão quando vierem novos conteúdos, e pra acompanhar meus outros posts tá tudo centralizado em meu site pessoal até mais \o

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