Dicas e boas práticas com react

Faz alguns anos que estou trabalhando com react e, com o passar do tempo, aprendi algumas boas práticas e bons hábitos com meus colegas de trabalho e quero compartilhar neste texto. São pequenos detalhes que me ajudam a escrever um código mais elegante e com uma maior manutenibilidade.
Stateless e Functions

Ao criar um novo componente sempre comece pela forma mais simples:

• Uma única função
• Sem o uso de estados (stateless)
Desta forma você reduz a complexidade dos componentes desde a sua criação e facilita a manutenção.
const Username = ({ username }) =>

The looged user is: {username}

Um componente react pode ser apenas uma função quando não interferimos no seu ciclo de vida, ou seja, quando não se usa nenhuma das seguintes funções:
• constructor()
• render()
• setState()
• componentDidCatch()
• componentDidMount()
• componentDidUpdate()
• componentWillUnmount()
• shouldComponentUpdate()

Organize os métodos da sua classe

Adotar um padrão para organizar suas funções dentro de uma classe react é simples. Essa prática facilita a leitura do código dos componentes e também simplifica a navegação em arquivos grandes, assim, é possível prever onde estará cada função.

Você pode adotar o padrão que te deixar mais confortável, minha sugestão é essa:

1. Construtor
2. Métodos do ciclo de vida do react
3. Métodos do componente
4. Render

export default class ExampleComponent extends React.Component {
// 1. contructor
constructor(props) {
}
// Métodos do ciclo de vida do react
componentDidCatch(){
}
// Outros métodos
isAdmin(user){
}
// Render
render() {
return (

);
}
}

Mesmo sendo um hábito simples ao adotar um padrão devemos ser disciplinados para manter a sua consistência, principalmente quando existem várias pessoas programando no mesmo projeto, esses padrões devem ser documentados e respeitados.

Um componente por arquivo

Evite criar vários componentes no mesmo arquivo, isso facilita quando procuramos por eles no editor de texto, principalmente quando os nomes de ambos são os mesmos.

Use parênteses no método render quando houver mais que uma linha. Muitas vezes tentamos simplificar tanto o código que podemos cair em algumas armadilhas. Quando estamos usando Tags JSX dentro do JavaScript, o código pode ficar esteticamente confuso e isso é muito comum no método render do react.

É possível resolver isso usando parênteses para definir os limites de contextos diferentes.
// Ruim
render() {
return

;
}

// Recomendado
render() {
return (

);
}

// esse também é bom
render() {
const child = ;
return {child};
}

Manter o code base atualizado

É muito trabalhoso manter dependências de um projeto atualizadas, mas quando temos as ferramentas certas isso fica trivial. O Yarn, por exemplo, resolve isso com o comando:

yarn update-interactive

Use keys em listas

Sempre que for usar uma lista utilize keys, elas ajudam a melhorar a performance de renderização do seu componente. Essa recomendação está na documentação básica do react. (https://reactjs.org/docs/lists-and-keys.html)

const listItems = numbers.map((number) =>

• {number}

);

Conheça e use as ferramentas disponíveis

A grande popularidade do react está diretamente ligada ao seu ecossistema. Existem muitas opções de ferramentas desenvolvidas para aumentar a produtividade para o/a dev.

Abaixo, segue uma lista de ferramentas que são indispensáveis:

• Babel/preset-react
• ES6 + ES7 + ES8
• EsLint
• Flowjs
• Jest + Coverage
• Prettier
• React Dev Tools
• Redux Dev Tools

React StrictMode

Usar o StrictMode é uma forma de encontrar e prevenir problemas potenciais no seu projeto react, ele irá aumentar o número de warnings (avisos) no console alertando sobre:
• Side effects inesperados
• Uso de componentes com ‘unsafe lifecycles’
• Uso de APIs legadas

Conhecer esses avisos prepara a sua aplicação para as próximas versões do react.
import React from ‘react’;
function ExampleApplication() {
return (

);
}
Adotar ou não essas pequenas dicas cabe a você, nenhuma delas é obrigatória, mas acredito que podem ajudar escrever um código melhor.
Você tem alguma outra dica que poderia acrescentar, que tal compartilhar conosco?

*Lúcio Charallo é engenheiro de Software na Pipefy