React (native) Flatlist data switching Performance

user_6788456 0
Viewed 85

So I have a page of with a flat list and a toggle between 2 sets of data, current events and past events.

They will occupy the same UI and never be displayed at the same time.

The data will all be loaded asynchronously at the beginning, with the current events displayed first, therefore ill put the data in the flatlist to start.

I need to decide is it better / is there even a difference to have 2 separate flatlists and viewlogic between the 2, or one flatlist that switches the data, i.e.

1. 1 flat list and switch the data

 <View>
        <FlatList
          data={(currentEventsSelected) ? currentEvents : pastEvents}
          keyExtractor={item => item.eventID}
          renderItem={({ item }) => renderItem(item}
        />
<View/>

*1. 2 flat list and switch the active lists

 <View>
{
(currentEventsSelected) 
?  <FlatList
          data={currentEvents}
          keyExtractor={item => item.eventID}
          renderItem={({ item }) => renderItem(item}
        />
<View/>
: <FlatList
          data={pastEvents}
          keyExtractor={item => item.eventID}
          renderItem={({ item }) => renderItem(item}
        />
<View/>
react-native-flatlist react-native reactjs
1 Answers

As mentioned above flat list and switch the data better than flat list and switch the active lists just update the data list conditionally not the whole list.

for the optimization purpose you can follow this offical blog. https://reactnative.dev/docs/optimizing-flatlist-configuration

you can update your FlatList as you know should avoid inline function in FlatList (https://reactnative.dev/docs/optimizing-flatlist-configuration#avoid-anonymous-function-on-renderitem):

const renderItem = ({ item }) => {
// TODO: What you want
}

.
.
.


<FlatList
  data={(currentEventsSelected) ? currentEvents : pastEvents}
  keyExtractor={item => item.eventID}
  renderItem={renderItem}
/>
user_130318180
Related