Infinite-scroll with collection-repeat: Should I be concerned about memory?

Hi, I am using collection- repeat to display a large list of events (that I retrieve via http gets). I am going through infinite-scroll’s documentation and tutorials to implement further data fetches from the server.

While the instructions are easy, the tutorials all indicate that I really need to “concat” the new data to my old data. If I do this, the array keeps getting larger and larger with each fetch.

Should I be concerned that I will run out of memory or does collection-repeat take care of releasing resources that go out of screen?

If I should be concerned about memory, then I’d need a way to reload items that have been released at the top, not at the bottom.

Am I overthinking this? Any thoughts?

Basically, collection-repeat only renders the visible elements. That’s one of the reasons why collection-repeat is better than ng-repeat.

I think you can have an array of about 10.000 elements without worrying about memory consumption. And if you array or ‘list of event’ get bigger than 10k elements then I think that there’s something wrong with you app (I mean, scroll through 10k items? That’s a lot for a human being to seek through. It’s better to create some kind of search).

Hope it was helpful.

@grillorafael, thank you. Yes 10k is beyond what I hope to display. I’ll probably cap it at 5k. You are indeed right - I also plan to add in filtering.

So if I understood you right, collection-repeat only reuses display memory - it does nothing about managing the backend array memory - that continues to grow as I add to it, correct?

@arjunrc yes. As far as I know it’s about display memory (which is probably the bottle neck)

sounds good - thanks. It works like a charm. You’re right about the bottleneck being the display memory.

@grillorafael As far as I understand this only works with JS scroll.

On iOS I want to use native scroll since I have images in my lists. So what solution is there for replicating the same functionality as “collection-repeat” (only rendering DOM items that are in the view-port) ?

Many thanks.