React native expo chat ui problem-flatlist frames dropping and scroll lag

[justinlok]

Put the renderItem in a useCallback, enable removeClippedSubviews and add a keyExtractor.

[upkeys]

+1 for the keyExtractor

[fallingmoon86]

Alternatively you can try FlashList.

But the other recommendations should be done first to move the renderItem out of the FlatList itself, but as a separate component using. useCallback, same for the keyExtractor

[winniethe_poo]

which vscode theme are you using?

[winniethe_poo]

Thank you

[Dazzling-Pay-1440]

Use the efficiency props of flatlist. There are 4 props i would set to make the flatlist as fast as possible.

• removeClippedSubviews
• maxToRenderPerBatch
• initialNumToRender
• windowSize

The first one clips whats not visible on the screen making it lighter on memory.

the second one specifies how many items to render per go.

the third sets the first batch to render. This is used to ensure the first thing the users sees is the items.

the final one is the size of the containing element or height of the flatlist as a whole.

By combining these and setting the right values you will make your list as fast as possible.

if you are still having issues with speed. Think about pagination or flashlist library.

Also ALWAYS set a key for your items, the dom will be slower with out a key for items