Propagando dados numa aplicação React e benchmark das diferentes estratégias

[bernardodiasc]

Olá galera, pintou uma dúvida aqui numa questão arquitetural em uma aplicação React que utiliza Redux.

A dúvida é simples, as repostas são variadas mas geralmente apontam em uma direção. O problema é que na investigação que fiz não haviam comprovações das opiniões em geral, o que me deixou com a pulga atrás da orelha. Já adianto que não foi falta de pesquisa, tenho minha própria convicção que é muito baseada em anos experiencia prática em aplicações robustas, mas sem benchmarks não consigo garanti-las e fica meio difícil argumentar com outros do time.

Seguinte, começando pela questão básica:

Passar dados via props pelo component parente ou conectar o componente no estado global?

A resposta óbvia costuma ser conectar os componentes. E pra mim faz muito sentido em diversos aspectos, em geral, na minha opinião, muito melhor manutenibilidade:

• Uma origem dos dados. Não há risco de componentes intermediários mudarem os valores da prop (tornando-se outra, de fato, mas com o mesmo nome).
• Reduz interdependência entre componentes. Os componentes podem mudar de lugar na estrutura facilmente pois não dependem do contexto.
• Consistência é importante. Evita criar exceções tornando a vida do desenvolvedor mais difícil e a linha de raciocínio mais "pesada". Quando a consistência é a regra, muita energia intelectual é poupada pois não se precisa pensar muito "de onde vêm esses dados?".
• Menos arquivos pra manter quando há mudanças. Se não há intermediários entre a fonte de dados e o componente que está sendo trabalhado, podemos ignorar completamente os componentes parentes, fica muito mais simples de trabalhar.
• Manutenção dos dados. Assim como sabemos que há apenas uma origem dos dados, sabemos que também há uma via única onde os dados são transformados e cacheados. Na hora de trabalhar na manipulação dos dados pode se confiar em funções puras devidamente testadas, por exemplo, e ferramentas como reselect pra memoizing.

A respeito de performance é onde não tenho respostas. Na documentação oficial do Redux o Dan Abramov diz que conectar componentes é mais performático. Mas ele só diz isso, não pude ver ou não encontrei comprovações. Até mesmo por ser algo muito específico de cada projeto, compreensível.

O problema maior é que pra conectar um componente é preciso usar o react-redux, que não é propriamente o redux. E ao contrário do Redux, que é bem simples, o react-redux biblioteca é bem cabuloso. Na hora de checar por mudanças no estado global ele mete um deep equal (se não me engano) e pá. Além do mais, o mapStateToProps executa toda vez que há mudanças no estado, então mesmo usando memoizing dos seletores, e mesmo não havendo nenhuma mudança relevante nas props para determinados casos, ainda rolam muitas execuções extras em cada componente conectado (com o HOC connect).

Não estou entrando no mérito de "smart/dumb components", e to considerando que há um certo bom senso na hora de conectar os componentes. Digo, a ideia não é conectar tudo, mas mensurar (com benchmark!) até que ponto isso é performático.

Eis a questão principal que me fez vir buscar ajuda aqui...

Sei que da pra fazer benchmark e avaliar performance de diversas maneiras. Mas desse problema específico, como vocês fazem benchmark? Digamos, se eu for fazer uma entrega que conecta um componente pra consumir dados globais onde antes era recebido pelo componente parente, de que forma posso comprovar ganho de performance (ou pelo menos comprovar que não houve degradação)?

Agradeço pela atenção, sugestões são muito bem vindas!!! :)

Referências:

• https://github.com/reduxjs/react-redux
• https://redux.js.org/faq/react-redux#should-i-only-connect-my-top-component-or-can-i-connect-multiple-components-in-my-tree
• https://redux.js.org/faq/react-redux#how-can-i-speed-up-my-mapstatetoprops
• https://reactrocket.com/post/react-redux-optimization/

[lddv]

Acredito que uma estratégia interessante seja rodar o Profiler da extensão do React no Dev Tools em cima da sua branch com as mudanças e na outra branch com o jeito antigo.

Ao gravar as interações, seja na hora do loading ou mediante interações do usuário, você conseguirá perceber quais componentes re-renderizam e se isso causa algum lag ou queda de performance.

[ninetails]

Mas acredito que com Redux, o mérito está exatamente nos smart/dumb components. Não me recordo se o connect ou o mapStateToProps tem algo com memoize, mas o React tem o shouldComponentUpdate/React.memo pra controlar as atualizações dos dumbs components. Se não me engano, o Redux usa Context API, logo toda mudança de estado iria sim refletir em todos os lugares que estão "conectados" pq em teoria todo Consumer da Context API associado ao Redux iria engatilhar um rerender, e por isso digo para não deixar propagar adicionando manualmente memo/SCU. Mas como apontado, é só especulação teórica minha...

Creio que esta ferramenta (react-perf-devtool) auxilie no que está procurando. E aí usar o React Dev Tools pra ver quem tá consumindo mais recursos.