How big is too big for an array stored in state with ngrx?

Question

I have an array of around 4000 to 5000 objects that I need to work with throughout the life cycle of my angular app. I use ngrx for state management in this app and would load this data using an effect with the startWith operator. I was wondering how big is too big for an array of objects to be loaded and stored in state in this way.

Answer 1

It will really depends what's in your array, and what you plan to do with it. An array itself can contains a lot of values before it has any impact on your app.

But if you've got an array containing a humongous amount of values, here's my advice:

• Do not display all the items at once, either use pagination or infinite scrolling solutions that you can find out there (there's a generic one into Material CDK for example!). This will be one of the biggest issue you might encounter: Displaying too much in the view
• If you know you'll have to search into the array, try to build an index for your search as soon as you receive the array, not every time the search changes. For example if you've got an array of users and you know that your UI has a "Show only people with an age of +18", then you could create a Set containing all those people (only references to them)
• Keep your data immutable and use the basic Angular functionalities: trackBy on your list with your *ngFor and also changeDetectionStrategy: ChangeDetectionStrategy.OnPush`

I've already tried to see if an app could handle 100K items and the answer is yes, even though it started to feel slightly unresponsive sometimes. So 4 or 5k should be all good following the information above.