Preparing data for state out of big dataset from API

Question

I couldn't find the answer to this question. Not sure if this is just obvious and I'm overthinking or I tried asking the wrong question.

Basically, I'm trying to build an app with React (first project) where I get League of Legends match history of a given player (e.g. 300 matches from entire year - or maybe even all of their matches ever). Each match obviously contains some data about it (duration etc.)

Now, I want to loop through those matches and prepare some data to be used in different parts of the app. For example, I want to count how many games the player played on different champions, what were their stats, win ratio etc. I'm not sure where I should do this data processing. Should it be right after I get data back from API? Or maybe only when I need to render a component with those champions summary? - second one makes less sense to me as let's say I'll have to go through those 300 matches again in some different part of the app to process some other piece of information. On the other hand, I feel like gathering all this data upfront and saving it into state, just in case, is an overkill.

Please, give me some directions.

Answer 1

it seems to me like you need some sort of a global state manager.

The options I'm aware of are React's useContext, Mobx and Redux.

If you need just a few variables or little data - you should use React's Context Hook: https://reactjs.org/docs/hooks-reference.html#usecontext

Otherwise, and most common would be to use Mobx or Redux.

https://mobx.js.org/README.html

https://redux.js.org/

(From what I hear, Redux is harder to learn and use than Mobx, but is better.)

In any case, you will save the fetched data to a variable in said manager, and access it whenever, wherever.

You could then process it. It makes sense to process it when you need it, and save it next to all the data.

Answer 2

It really depends on the size of the payload / data.

With heavy payload, you'll have to load in chunks. What does it means? Let's say you have a table with 100,000 rows and you have a pagination tab which let's you see 1,000 rows of data at a time. At that point, I would consider to 'lazy load' the data on each 1,000 / 5,000/ X rows. Again, it depends on the size.

It seems that in your case it won't be too heavy. It seems fair that you would load each player's data once you ask for the player's profile. It might feel like a lot of information but in my opinion it'll be sufficient to load it once and work from there. Unless the JSON is really heavy.

You might want to consider to use Redux if you need to use the data in different components, it'll make your life much easier.