Fluxo de Desenvolvimento em Aplicações React

No mundo JS, há muitas possibilidades de criar um boilerplate, bem como muitos boilerplates disponíveis (por exemplo: create-react-app). Aqui vou falar sobre algumas ferramentas auxiliares para desenvolvimento e como combinar então para criar um fluxo consistente de desenvolvimento que queremos assegurar:

  • padrão de código e arquivo
  • testes automatizados

Continue reading Fluxo de Desenvolvimento em Aplicações React

React: Realizando State Update de modo a evitar renderizações desnecessárias

Evitar renderização inútil é um tópico realmente importante para melhorar o desempenho de aplicações React, podendo ser, inclusive, um requisito para uma experiência de usuário satisfatória.

Há alguns anos eu estava criando um aplicativo web de pesquisa que possuía uma tela com N campos de entrada (sob demanda). Eu estava começando com React e, à primeira vista, pareceu-me uma boa estratégia manter o array de valores de entrada no estado do componente pai e apenas passar o callback de mudança de estado e o índice para seus filhos. Algo parecido com:

Mas essa abordagem revelou um desastre com N grande, cada dígito tem utilizava muita renderização gerando atraso. A fim de antecipar e evitar esse tipo de desastre, escrevi esse artigo.

Continue reading React: Realizando State Update de modo a evitar renderizações desnecessárias