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