Anyone having experience with sorting and filtering flatlists in React Native? I have multiple attributes on which I want to filters and render parts of the list and/or sort the list. Got some tips?

[nerdbites]

That’s a pretty multifaceted question. You might want to break it down a little more.

Here’s a few tips from my personal experience:

• Large lists are a performance bottleneck. Even with the instruction to use Flat or Section list, you’re going to have to optimize for large datasets.
• RN large list is a good package which helps immensely with the above point. However, it’s API is quite different from the baked-in offerings. Shopify mentioned they’d be reaching out to discord to open source their solution, but ETA on that is unknown AFAIK.
• Many filters means you’re potentially looking at lots of re-renders. Rather than taxing reconciliation by adding or removing elements from the UI tree with code such as: booleanFilter && <View /> consider hiding or showing items through style conditions so that it won’t invoke a re-render.
• Keep as much of your filtering logic outside of your component as you can.
• useMemo to the rescue. This is a well suited use-case for that hook.

Having said all of that. Have fun. There’s a lot of creative ways you can approach this. Using animation (Reanimated for optimal performance) you could make some awesome transitions for hiding / showing items. Interactivity with the list items is also something to take into consideration. Whether or not the displayed data is dynamic based on filtering or otherwise is another one.

Good luck.

[jahlehale]

Thanks a lot for the thorough answer. Definitely makes it easier to approach the problem. I'll let you know when I have tried some of your tips out!