React container pattern


Ive been building a react native app over the past few months, and one of the pages loads a list of 700 players and will do a bunch of joins and other calculations before showing the list.

All this happens in the container where I also subscribe to the data. The issue I have is that all this reruns every time the container code has to rerun, and this will happen even when small changes occur. The list of 700 may not even change but it still has to be recalculated and this can lead to slow performance. Is there a better way to handle things? Is the best practice to be splitting things into smaller components and multiple parent containers?

@elie do you need reactivity for your list of players ?

From the server no. Although the players are coming from a publication
right now.

But which team owns a player does have to update reactively. This isn’t a
field on the player, but on the team that the player belongs to. And each
player row shows which team owns him.

I hope that makes sense.

@elie then the solution would be to fetch the data via a method call, as you mentioned you do some joins so I’m thinking your data is relational. Try-out grapher maybe it can help you on that part.

What’s the best way to work with multiple subscriptions in the same
You want things to rerun when a subscription has new data, but you don’t
want everything to rerun. Is there a good pattern to deal with a case like