Boas práticas pra eu nunca esquecer

Depois de longos meses ensinando, fazendo algumas consultorias, analisando e escrevendo código em React, cheguei nesse conjunto de boas práticas que escrevi num papel e fico me lembrando pra não errar:

Tudo é componente

Pára de pensar em página, em template, em DOM e ter medo de acionar o render, isso não está manipulando DOM.

Até a manipulação de rotas é apenas o comportamento de um componente que está mais próximo da raiz e utiliza o ciclo de vida dos componentes para reorganizar a árvore.

Cada galho é uma árvore independente

Cada componente é responsável por orquestrar seus filhos, mas não conhece o pai e nem seus irmãos, apenas troca mensagens por funções recebidas no props que magicamente ele sabe que existe e deve acionar, mas não sabe o que faz.

Universos imutáveis

Não ter medo de acionar o render é manter o universo sempre num estado válido e imutável, recomponha sempre sua árvore e pense nela apenas.

A sua interface gráfica é o que está no return do render, ela é imutável, sem código (sem scriptlet, apenas marcação) e deve sempre representar o estado do universo, não dados isolados.

Só existe const

Pára de escrever let (bem, var voce já deve ou deveria ter parado). Quando você trabalha com universos imutáveis, a interface representa o estado dele e você não precisa de variáveis, apenas de constantes.

Dessa forma se mantém o mais fiel possível à imutabilidade. Pensa comigo, se tem necessidade de mudar um valor, não vai ser atribuindo diretamente na propriedade, é reconstruindo o universo.

Dê preferência a Props

Tem casos que é impossível (do tipo ainda não consegui Mindset necessário) deixar de usar o state, mas usar como regra sempre expor os dados em uma fonte read-only te mantém na imutabilidade.

Centralize a fonte dos dados

Flux é o padrão, mas o único razoável pra manter o código saudável dentro dessa abordagem é o redux, foquemos nele.

Só vai existir uma única fonte de dados que parte da raiz da sua árvore que representa a aplicação inteira (dentro do possível).

Crie Buracos Negros

Eu por exemplo que já enfrentei e enfrento integrações, tento minimizar isso criando pequenos universos que trocam informações por meio do store. Caso tenha essa necessidade, acione uma outra árvore apenas por meio do Provider dela.

Evite dados repetidos

Não podem existir estados diferentes para um mesmo modelo em um universo imutável.

Concentre as mudanças nas Sagas

Existe apenas um D’us que pode interceder por vós, não sei como ele é, mas deixou um local pra você concentrar sua orações, realize as mudanças de estado desse universo para criação de um outro válido apenas no redux-saga.

Na hora que estiver fazendo seus testes unitários se lembrará desse sermão.

Dê preferência a funções puras

Vai agradecer também quando estiver testando, é mais fácil manter imutabilidade em uma função que apenas representa uma interface que aciona outras functions conforme a interação do usuário.

Um detalhe especial pra decorators, eu aboli o uso por causa dos testes, é muito trabalhoso mockar.

Finalizando

São boas práticas mais abstratas, cada ferramenta tem também seu conjunto interno de boas práticas, mais pesquisas se mostram necessárias.

Pra quem já trabalha/estuda o mundo React esse texto fará algum sentido, se mora em Fortaleza eu posso ajudar num curso presencial