What is the best way to deal with large and dynamic FlatLists?

[SrBrahma]

Hey there!

In my app, I am doing a logs system, which looks like as any messenger app. The logs comes from the server via client request or automatically sent by the server (events).

The number of logs can be quite high, like 1000 logs. New logs may be inserted in the end of the array or somewhere in the middle, if the client haven't already fetched some there.

I never used the FlatList and also never used arrays in MobX. My question is: What is the best performant way to handle big arrays that may be modified dynamically, and will be shown in a FlatList?

Also, each individual log is static, its contents won't be changed, so no need for the content to be observable.

[danielkcz]

That's not a question for MobX which simply lets you know when any change happens. What you need to handle is some virtualized way of rendering that list so only a visible portion is rendered. I have no idea how to do that with FlatList (I assume React Native?).

Closing as we can't really help you here.

[SrBrahma]

For bare React, to add an item to an array, we would setArray([...array, new item]).

My question is more like: with MobX, is there a more performant way to deal with large arrays? Would doing any array operation with MobX would under the hoods also do this shallow array clone that isn't very good for large arrays?

Also yes, FlatList is a React Native scrollable component. It only renders data that is displayable on the screen, given an array of data and a function to render them.

[danielkcz]

Well, MobX is mutable by nature, so instead of cloning, just .push or .splice.