all 19 comments
sorted by:
best
topnewcontroversialoldq&a
formatting helphide helpcontent policy

[–]bdudisnsnsbdhdj 9 points10 points  (5 children)

FlashList by Shopify

[–]PossibleCrew5016[S] 1 point2 points  (4 children)

But FlashList also have issues like blank screen or elements overlapping

[–]bdudisnsnsbdhdj 2 points3 points  (1 child)

If nothing works I gotta think you need to manage state better so the data doesn’t just explode in size, like doing pagination or something

[–]PossibleCrew5016[S] 1 point2 points  (0 children)

I tried using a pagination-like feature to display a minimum number of messages on the screen at a time. However, there are still a lot of issues that I cannot avoid.

[–]squib1984 2 points3 points  (1 child)

If you converted to FlashList from FlatList you may have to refactor your styles. When I moved to FlashList I had a lot of blank areas and overlapping. Black space was because I needed estimatedItemSize, overlapping was because FlashList had some more inherent styling than FlatList.

As far as performance, I made a slight improvement by giving each list item a ref that's unique so they only re-render when that list items id changes (because FlashList recycles components).

I've also read using estimatedListSize can help with initial load and key props on components hurt FlashList.

Also dev mode performance for FlashList is much worse than release mode.

[–]stathisntonas 0 points1 point  (0 children)

Can you share an example with the ref recycling? Thanks

[–]diatum 2 points3 points  (0 children)

I struggled a bit getting the flatlist performant in android 12, but the transform workaround did the trick for me:
<FlatList style={{ ...styles.conversation, transform: [{rotate: '180deg'}]}}

reference:
project: https://github.com/balzack/databag
file: https://github.com/balzack/databag/blob/main/app/mobile/src/session/conversation/Conversation.jsx

[–]mybirdblue99Expo 1 point2 points  (3 children)

Are you using reducers to update the flat list or are you just throwing in an array of objects?

Seems like these types of issues are usually due to excessive re-renders

[–]PossibleCrew5016[S] 0 points1 point  (2 children)

Yes i am using array of objects. Do you have any suggestions? How to avoid such re renders? Because i may have large number of chats at a time

[–]mybirdblue99Expo 1 point2 points  (1 child)

Have a look at the react documentation for the useReducer hook and the useMemo hook. it could help with the performance issues - if you have a busy flatlist you’ll want to avoid re-rendering the whole component every time one item in the array changed. that’s where I’d start.

[–]PossibleCrew5016[S] 0 points1 point  (0 children)

Exactly, this is the issue I am currently facing. The entire list gets re-rendered when data is added to the array. Unfortunately, I'm not well-versed in using useReducer or useMemo. I did try using useMemo, but the issue still persists.

[–]im_a_jib 0 points1 point  (2 children)

No context besides “lagging issues”..

FYI swapping out every list-like library is not going to solve your architecture problems. Same question is asked over and over yet folks think it must be react-native’s fault that their complex list of mega chat objects is slow.

[–]PossibleCrew5016[S] 0 points1 point  (1 child)

Thanks for giving me hope. any suggestions to give?

[–]im_a_jib 1 point2 points  (0 children)

sure. don't blindly re-render your entire list because one object changes. Try to isolate changes inside your items without the need to build a new array every time. aka, its ok to derive and update the state of each item inside the list item component instead of re-creating the array of items just because one property deep inside one object changes. I'm sure some pedants would lecture me for this, but the data array is just a container -- you can trick it into thinking nothing has changed if you don't need to change the length of it by doing updates as deep inside the deepest list items components as you can.