Como otimizar a performance dos builds seu aplicativo usando bloc para evitar rebuilds desnecessários?

Estava recentemente analisando um código meu e me veio à cabeça: Como eu poderia otimizar os rebuilds de um widget simples com um badge com um contador simples dentro? Exemplo:

Como otimizar os rebuilds desse contador de favoritos?

Mas como que eu faria para testar isso?

Para fazer isso, eu criei um app simples onde vou usar algumas soluções que o pacote BLoC nos disponibiliza. Ela são BlocBuilder, BlocSelector e o context.select . Os detalhes de cada um deles podem ser lidos nos links anexados (inclusive em português).

Pra isso criei esse widget disponível neste gist.

O resultado será essa tela aqui:

A tela fala por si só. Temos um primeiro builder que vai mostrar o resultado do incremento/decremento do contador. Após isso temos três seções. As soluções utilizam BlocBuilder, BlocSelector e o context.select para mostrar a mensagem adequada caso o valor do contador seja múltiplo de 5 ou não. Após incrementar o valor até 5, esse foi o resultado:

• BlocBuilder: 6 rebuilds
• BlocSelector: 3 rebuilds
• context.select: 3 rebuilds

Resultado dos rebuilds após incrementar o valor de 0 até 5.

Mas. aí fiquei pensando: será que consigo quantificar isso em tempo? Para isso fiz uma segunda implementação nesse outro gist.

Para tentar quantificar um pouco estou usando a função Stopwatch para toda vez que o o build seja chamado, o contador dispare e no final do builder esse contador seja pausado. E o valor entre essas operações seja somado e armazenado a sua respectiva variável.

Beleza, vamos para alguns resultados?

Primeira rodada de builds

Segunda rodada de builds

Terceira rodada de builds

Quarta rodada de builds

Deu pra perceber quão eficiente é o BlocSelector, e como o BlocBuilder foi disparado o que mais gastou tempo para fazer os rebuilds. Somando todas as rodadas de builds, tivemos esses resultados.

Resultado da soma dos testes anteriores

Conclusão

Com isso, percebi o quão criteriosos precisamos ser ao usar o BlocBuilder. O BlocSelector foi aproximadamente 96 vezes mais eficiente enquanto o context.select foi 5.6 vezes mais eficiente, ambos quando comparados com o BlocBuilder.

Só quero reforçar que provavelmente existem maneiras mais eficientes de performar o código, mas dado a minha vivência com o gerenciador de estados BLoC, essa foi a maneira que eu fiz para implementar e medir o tempo desses rebuilds.

Como disse, o cenário que montei é simples, mas ilustra bem a disparidade entre os tempos e esses resultados devem se manter em telas mais complexas.

Se chegou até o fim dessa leitura e tem alguma sugestão, o espaço de comentários está aberto a sugestões.

Valeu e até a próxima!