Clean Code com React

Clean Code é mais do que apenas código funcional. Clean Code é manter um código que seja fácil de ler, simples de entender e bem organizado.

Por isto hoje, falaremos sobre algumas das melhores práticas a serem seguidas para melhorar a integridade do seu app em React. Essas regras são amplamente aceitas e usadas pela comunidade, por isto ter esse conhecimento é fundamental.

Ao analisar essas sugestões, é importante lembrar que é exatamente o que são: sugestões. Se você discordar de qualquer um deles, está tudo bem. No entanto, essas são práticas que considero úteis para escrever meu próprio código React.

Tudo será mostrado com código, então aperte o cinto e vamos nessa:

1. Utilize Fragments

Sempre utilize Fragments ao invés de div. Além de manter o seu código limpo ele também deixa seus componentes mais rápidos pois é um nó a menos a ser criado no DOM Virtual do React.

//Ruim
return (
  <div>
    <Button />
    <TextInput />
  </div>  
)

//Bom
return (
  <>
    <Button />
    <TextInput />
  </>  
)

2. Não defina métodos dentro do render

Não defina uma função dentro da renderização. Tente manter a lógica interna da renderização com o minímo necessário.

//Ruim
return (
  <button onClick={() => fazAlgumaCoisa()}> 
    Clique aqui
  </button>  
)

//Bom
const fazAlgumaCoisa = () => console.log('clicou');

return (
  <button onClick={fazAlgumaCoisa}> 
    Clique aqui
  </button>  
)

3. Renderização condicional

Se você precisa renderizar algo somente se essa condição for verdadeira, não utilize o operador ternário, utilize o operador && para isso.

//Ruim
return (
  <>
    {showConditionalText ? <p>Mostra se a condição for verdadeira!</p> : null}
  </>
)

//Bom
return (
  <>
    {showConditionalText && <p>Mostra se a condição for verdadeira!</p>}
  </>
)

Continuando neste quesito de renderização condicional temos um outro ponto que é quando de fato temos uma condicional onde devemos exibir algo quando a condição for verdadeira e outra diferente quando for falsa, pensando neste cenário devemos fazer uso do operador ternário como visto abaixo:

//Ruim
return (
  <>
    {showConditionalText && <p>Mostra se a condição for verdadeira!</p>}
    {!showConditionalText && <p>Mostra se a condição for falsa!</p>}
  </>
)

//Bom
return (
  <>
    {showConditionalText ? (
      <p>Mostra se a condição for verdadeira!</p>
    ) : (
      <p>Mostra se a condição for falsa!</p>
    )}
  </>
)

E no caso de termos mais de uma condicional ? Nesse caso se liga na dica abaixo:

4. Object Literals

Fazer uso de Object Literals nos ajuda muito para deixar o nosso código mais legível. Digamos que você queira mostrar três tipos de usuários com base em suas funções. No modo "tradicional" teríamos que usar um if/else ou switch, mas usando Object Literals seu código fica muito mais limpo, veja abaixo:

//Ruim
const {role} = user

switch(role){
  case ADMIN:
    return <AdminUser />
  case MANAGER:
    return <ManagerUser />
  case USER:
    return <NormalUser />
}

//Bom
const {role} = user

const components = {
  ADMIN: AdminUser,
  MANAGER: ManagerUser,
  USER: NormalUser
};

const Component = components[role];

return <Componenent />;

5. Utilize Object Destructuring

Use a desestruturação de objetos a seu favor. Digamos que você precise mostrar os detalhes de um usuário, veja como ficaria a implementação:

//Ruim
return (
  <>
    <div> {user.name} </div>
    <div> {user.age} </div>
    <div> {user.profession} </div>
  </>  
)

//Bom
const { name, age, profession } = user;

return (
  <>
    <div> {name} </div>
    <div> {age} </div>
    <div> {profession} </div>
  </>  
)

6. Utilize Template Literals

Use Template Literals para construir strings grandes. Evite usar concatenação de string. É bom e limpo.

//Ruim
const userDetails = user.name + " é um " + user.profession

//Bom
const userDetails = `${user.name} é um ${user.proffession}`

7. Organize seus imports

Sempre tente importar as coisas em uma determinada ordem. Isso melhora a legibilidade do código. A regra é a seguinte:

• Built-in
• Externos
• Internos

//Ruim
import React from 'react';
import ErrorImg from '../../assets/images/error.png';
import { Home } from '@styled-icons/boxicons-solid/Home'
import colors from '../../styles/colors';
import { PropTypes } from 'prop-types';


//Bom
import React from 'react';

import { PropTypes } from 'prop-types';
import { Home } from '@styled-icons/boxicons-solid/Home'

import ErrorImg from '../../assets/images/error.png';
import colors from '../../styles/colors';

8. Definir um estado que depende do estado anterior

Sempre defina o estado como uma função se o novo estado depender do estado anterior. As atualizações de estado no React são feitas em batch, e podem não gravar suas mudanças dessa forma podendo levar a resultados inesperados.

//Ruim
const [isDisabled, setIsDisabled] = useState(false)
const toggleButton = () => setIsDisabled(!isDisabled)


//Correto
const [isDisabled, setIsDisabled] = useState(false)
const toggleButton = () => setIsDisabled(isDisabled => !isDisabled)

Conclusão

Como falado acima, isso são sugestões que na minha experiência profissional tornam o código mais legível, para concluir as dicas a seguir não são específicas do React, mas sim boas práticas para escrever código limpo em JavaScript (ou qualquer linguagem de programação, nesse caso).

• Extraia lógicas complexa em pequenas funções com nomes claros do que elas fazem.
• Extraia números mágicos em constantes.
• Use variáveis com nomes claros do que elas representam.

É isso pessoal, um abraço e até o próximo post.