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

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.

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

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, projeto do curso presencial de React que ministro aqui na Caelum.

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, gostei bastante da sintaxe que ele possui via o tal do ngClass [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: https://github.com/JedWatson/classnames.

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 lib classnames 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 mega problema de complexidade ciclomática 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: https://github.com/omariosouto/react-dicas-classnames

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, me segue no meu twitter e pra acompanhar meus outros posts tá tudo centralizado em meu site pessoal https://mariosouto.com até mais \o