Mobile development and infinite List pattern

Question

I m currently working on a React Native application which aims to provide à huge list of items, using infinite scroll and a local state (no matter the technology / plaform, it's stored in RAM) of the app.

I've currently implemented it the following way :

• 30 items are rendered first
• Scroll to the bottom of the list
• Trigger infinite scroll
• Load 30 more items

Quite simple isn't it ?

The problem sits in the memory allocation. Devices don't own too much RAM, and at a point, the application throws an out of memory exception.

This way, I m asking for a way, or a pattern, to apply while dealing with huge lists like the biggest dev companies do this to avoid our current crashes...

Any suggestions ?

EDIT : actually, I keep a dataset that evolves with time, from 30 to 60, to 90 etc... Inside of the RAM (redux state)

• amon: Android has a RecyclerView that reuses list items when they are scrolled out of view. Surely React Native provides a similar control.
• mfrachet: The problem doesn't seems to relate on the List. But on the Dataset stored in RAM
• Bart van Ingen Schenau: After the user has scrolled to the bottom of the second set of 30 items, is there any need to still keep the first 30 fully in memory? Or could you discard that data and only re-load it when needed?
• mfrachet: Possible, but wouldn't it involve a weird scroll behaviour to reload 30 items instead of the 30 previous ones ? like a "replacement flash" ?
• amon: No. If you're in the middle of the list, scrolling downwards will load the next few items, and scrolling upwards will load the previous few items. RecyclerViews are implemented in a manner so that the layout is always smooth and won't jump around. These widgets can load data for each list item individually, you are not expected to keep the whole list in memory yourself. If an item is rendered before the data has arrived, they might render a placeholder.