I am trying to make an mobile app containing a vertical video feed similar to tiktok, reels etc... I use react native with expo, and i have read a lot of articles on the web but did not find a lot of paragraphs talking about memory management and state management.

Currently, i have a state array called videos. When the user reaches the end of the list, I load a bunch of videos and append it to the end of my state array. The problem i see in this is that if the user scrolls for an hour, my state array will contain hundreds of videos.

I use flatList and Expo-video (expo 52) to display the feed. I have read in the documentation that the expo-video module handle by itslef the deletion of the player in memory so I would like to know if this big state array will be a problem.

As nobody mentioned the videos array in the articles I have read, here is what i would like to know:

• Should I set a maximum size for the video array ? If I do so, how to manage if the user scrolls up to see older videos ? How to cut the array properly to make sure the user does not notice anything ?

Here is the pseudocode I implemented at the moment :

//declare videos array
//declare PAGE_SIZE=3
//declare CurrentOffset and set it to 0

declare function loadVideos(){
   let newVideos = []
   newVideos = fetchVideos(PAGE_SIZE, offset)
   setVideos((prevVideos) => {
        return [...prevVideos, ...newVideos];
      });
   setCurrentOffset((oldOffset) => oldOffset + 3);
}

  const renderItem = (
      <VideoItem
        key={item.id}
        item={item}
        height={height}
        shouldPlay={index === currentViewableItemIndex}
      />
    );

 <FlatList
          data={videos}
          renderItem={renderItem}
          keyExtractor={(item) => item.id}
          pagingEnabled
          getItemLayout={(data, index) => ({
            length: height,
            offset: height * index,
            index,
          })}
          horizontal={false}
          viewabilityConfigCallbackPairs={
            viewabilityConfigCallbackPairs.current
          }
          removeClippedSubviews={true}
          showsVerticalScrollIndicator={false}
          initialNumToRender={10}
          windowSize={10}
          maxToRenderPerBatch={10}
          **onEndReached={loadVideos}**
          decelerationRate={"normal"}
        />

I hope my question is clear, this is my first question on StackOverflow so sorry if I missed something.

Have a good day and thank you for your help!