feat: Decrease number of re-renders on renderItem

[CarlosRafael22]

Proposed changes

This PR is a modification made on how the renderItem method is called to prevent unecessary re-renders when the user is loading more items on the end or start of the list. With this memoized renderItem call, when onStartReached or onEndReached is called adding new items to the list, only the newly created items, which were not memoized before, will call the renderItem passed as props to the Flatlist. Otherwise, all the items would be rendered again. I needed to use React.memo with a compare function to memoize the rendering of the item and a React.useCallback to maintain the function instance after each Flatlist re-render, otherwise we wouldn't have a memoized return from the renderItem.

Note

This is my first contribution and I couldn't install the dependencies with yarn or follow the other instructions in the Development workflow. I don't know why but yarn commands were not working and I couldn't make it work, other projects were okay with yarn. So I cloned the example app and was making modifications and testing the behaviour directly in the node_modules folder of that example. With that in mind, I hope it can at least help with a direction towards how to optimize the re-rendering of the Flatlist items.

Looking forward to feedbacks :)

[vishalnarkhede]

@CarlosRafael22 thanks for contribution. But I think it's better to handle this on app level. We should leave memoization for end user to implement as per his own requirements. And this is not something related to purpose of this library, but general optimization strategy for FlatList. Closing this for now!!

[CarlosRafael22]

Thanks for the feedback and explanation @vishalnarkhede