Algumas boas práticas que utilizo diariamente

Desde 2019, minha jornada com React tem sido marcada por constantes descobertas de padrões e melhores práticas. É empolgante observar como a comunidade evolui, adotando práticas que otimizam o desenvolvimento. Claro, reconheço que as melhores práticas não são universais, variando entre empresas, mas são cruciais para a eficiência e manutenção do código.

Componentes

Priorize Componentes Funcionais

Ao tratar de componentes, a ênfase recai nos componentes funcionais. Com uma sintaxe mais simples e sem métodos de ciclo de vida ou construtores, eles promovem a clareza do código. Quando possível, proponha a refatoração de class components para functional components.

Exemplo de componente funcional:

const FunctionalComponent = () => {
  // lógica do componente
  return (
    // JSX
  );
};

Exemplo de class component:

class ClassComponent extends React.Component {
  // lógica do componente
  render() {
    return (
      // JSX
    );
  }
}

Não seja preguiçoso ao nomear seus componentes

A atribuição de nomes adequados aos componentes é fundamental. Utilize PascalCase para garantir consistência. Certifique-se de que seu ESLint aplique e faça cumprir essas regras. Coloque algum esforço nisso antes que seja tarde.

Evite Hardcoding em Filtros, Navegação e Listas

Nunca deixe itens hardcoded para filtros, navegação ou listas. Utilize constantes para esse fim e, se possível, agrupe todas em um único arquivo de constantes. Aproveite o método map() para facilitar a iteração em listas.

Comentários Estratégicos

Apesar da controvérsia em torno dos comentários, no contexto do React, onde paradigmas diferem, a prática de escrever comentários é valiosa. Comentários bem colocados podem fornecer insights cruciais sobre a lógica específica do React.

Adote JSX e TSX

Ao escrever componentes, adote JSX para React e TSX para TypeScript. Essa prática simplifica a identificação do tipo de arquivo e melhora a clareza do código.

Desestruture as Props

Desestruture as props do componente sempre que possível. Isso aprimora a legibilidade do código, a menos que seja crucial entender as diferenças entre o estado externo e interno do componente.

Exemplo de desestruturação de props:

const MyComponent = ({ prop1, prop2 }) => {
  // lógica do componente usando prop1 e prop2
  return (
    // JSX
  );
};

Gerencie o Número de Props

O cuidado com o número de props é subjetivo, mas se um componente possui mais de 4 ou 5 props, considere se ele está assumindo responsabilidades demais. Evite um excesso de props, o que pode indicar a necessidade de refatoração.

Use Objetos em Vez de Primitivos

Ao passar props, considere usar objetos em vez de primitivos. Isso simplifica a desestruturação dentro do componente, evitando torná-lo verboso e confuso.

Essas práticas visam criar código React eficiente e de fácil manutenção. Lembre-se, adaptar as práticas às necessidades específicas do projeto é crucial.

// Passando primitivos como props 
<UserProfile name={user.name} surname={user.surname} email={user.email} taxDocument={user.taxDocument} />

// Utilizando objetos como props 
<UserProfile user={user} />

Melhores Práticas Utilizando React e JavaScript

Pare de usar "var"!

Meio óbvio? Talvez não.

Use "const" e imutabilidade sempre que possível

Também meio óbvio

Mantenha ternários simples

No pior cenário, você tem dois ternários aninhados. Qualquer coisa mais longa deve ser uma instrução if ou switch por razões de legibilidade e facilidade de depuração.

// Ternários aninhados (a ser evitado)

const message =
  isMember ? "You are a member" : isVisitor ? "You are a visitor" : "Unknown status";

// Ternários simples

const displayMessage = isLoggedIn ? "Welcome back!" : "Please log in";

Simplifique com o optional chaining

Elimine essas verificações aninhadas e use o operador "?".

// Passando primitivos como props 
<UserProfile name={user.name} surname={user.surname} email={user.email} taxDocument={user.taxDocument} />

// Utilizando objetos como props 
<UserProfile user={user} />

Prefira template strings

É simples assim. As template strings permitem injetar valores na string e mantêm o formato, o que pode ser útil.

// Concatenação de strings tradicional 
const name = "John"; const greeting = "Hello, " + name + "! Welcome."; 

// Utilizando template string
const greetingTemplate = `Hello, ${name}! Welcome.`;

Evite aninhar ou encadear loops

Quando você encadeia métodos de iteração ou aninha loops, está aumentando a complexidade do código, o que pode retardar as coisas posteriormente ou à medida que seus dados crescem. Embora algumas operações possam exigir isso, avalie sempre sua estratégia de loop para garantir que você não tenha loops desnecessários ou loops que possam ser combinados.

Tenha testes unitários

Falando em boas práticas, não podemos esquecer a importância dos testes unitários. O Jest e o React Testing Library são ferramentas valiosas para garantir que sua aplicação funcione conforme o esperado. O Jest é um framework de teste completo para JavaScript, enquanto o React Testing Library fornece utilitários para testar componentes React de maneira eficaz. Integre essas ferramentas em seu fluxo de trabalho para criar uma base sólida.

Comments

[Lucas Cruz]

Curti bastante o post uma prática que não fazia e partir dessa leitura irei melhorar é da parte de "Mantenha ternários simples"