Por que usar o Styled Components pode melhorar sua aplicação React?

Se você está começando agora no React é muito provável que já tenha ouvido falar do styled components, é provável ainda que tenham recomendado que você use essa ferramenta e não te explicaram o motivo, hoje meu objetivo é suprir essa lacuna de uma forma bem simples e rápida já que mesmo aqui na Dio temos cursos que abordam essa biblioteca sem a devida explicação. 

De forma simples e direta, se você pesquisar o que é o styled components verá que trata-se de uma biblioteca que permite a escrita de código css em arquivos js, mas qual seriam as vantagens disso? Bom eu vou explicar mas antes vou te contar como descobri na prática algumas delas.

Quando comecei a estudar React logo vi esse tal de styled components e praticamente já comecei a escrever usando ele no lugar do próprio CSS e sabe o que eu achei? No minimo bizarro, fazer código css em um arquivo js me parecia algo de outro mundo, eu sabia que estava tudo certo mas ainda assim aquilo me incomodava profundamente como se algo estivesse absolutamente errado. Naquele momento eu estava fazendo aplicações simples então meu código era estritamente css dentro de arquivos js e nesse momento eu não via razão para continuar fazendo aquilo, até que avançando um pouco no React comecei a praticar com pequenos projetos que me mostraram o potencial da ferramenta.

Imagine o seguinte: você quer fazer uma aplicação com tema light e dark e como essa funcionalidade é basicamente uma troca das cores na página seria muito fácil caso sua cor fosse simplesmente uma variável cujo valor pode ser substituído certo? Seria uma pena já que ao escrever css não podemos atribuir variáveis desse tipo… Ou será que não? Aqui foi um dos primeiros momentos que fiquei grato por já estar utilizando o styled components pois sim foi assim que eu resolvi de forma prática e rápida em relção a troca de cores na minha página! Nada de criar outras classes para a troca de cor nem fazer qualquer gambiarra para isso!

Outro exemplo que passei foi quando ao fazer uma barra de progresso eu pude simplesmente utilizar uma <div> e configurar uma widht dinâmica injetada via js, até aqui acho que você já deve ter visto um pouco dessas vantagens mais simples e diretas no desenvolvimento mas acredite a biblioteca oferta muitas outras vantagens e como meu objetivo é ser o mais direto possível vou explicar algumas abaixo:

Renderização somente do necessário

Com a biblioteca os estilos serão solicitados somente conforme serão usados em nossa aplicação, evitando carregar um arquivo completo contendo todo o CSS estando ele sendo usado ou não e se concentrando somente nos estilos dos elementos apresentados na página naquele momento.

Estilização dinámica

É possível usar condições ou variáveis em nosso estilo de forma que o estilo seja mais dinâmico de acordo com determinadas situações, como no meu exemplo da barra de progresso ou mesmo estilizações condicionais ao usar operadores ternários.

Evita problemas com classes

Muitas vezes ao nomear classes podemos ter problemas diversos, por exemplo imagine que você está usando um botão com className = ‘btn’, e está usando alguma biblioteca de estilo na sua aplicação, caso haja uma classe btn na biblioteca o seu botão será estilizado automaticamente  e talvez você não queira isso, com o styled components os nomes de classes são gerados automaticamente de forma a acabar com esse tipo de problema, imagine por exemplo um botão feito em React, quando você nomeia a classe normalmente ele tende a ficar assim:

<Button className="btn" />

 Agora ao Usar o styled components, o botão receberá uma classe única e automática quando renderizado, que será mais ou menos assim:

<Button class="xspadzka" />

Pode parecer bobo, mas isso evita muitos problemas com as classes.

Como disse, minha intenção é mostrar um pouco dos motivos para usar a biblioteca, você pode dar uma olhada em alguns artigos online para se aprofundar um pouco mais ou mesmo dar uma olhada na documentação da biblioteca que é ótima a propósito.

Como agradecimento por você ter lido até aqui vou deixar a recomendação de uma extensão que pode te ajudar muito trabalhando com styled components, a extensão é a vscode-styled-components com ela será possível usar o autocomplete do css assim como o spellcheck na escrita das propriedades o que será uma mão na roda nessa jornada!