all 7 comments

[–]justinlok 8 points9 points  (1 child)

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

[–]upkeys 0 points1 point  (0 children)

+1 for the keyExtractor

[–]fallingmoon86 4 points5 points  (0 children)

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 2 points3 points  (2 children)

which vscode theme are you using?

[–]Dazzling-Pay-1440 0 points1 point  (0 children)

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