Dealing With Multiple Flatlists on the same Screen

Question

Please help my deal with unnecessary re-renders when having two flatlists on the same screen

My screen requires two flatlists-

1. For HOSTS
2. For QUEUE

When the component mounts, I get data from the api call like this-

{
  "hosts": [{"id":"1", "name":"kyouma"},...],
  "queue": [{"id":"99", "name":"eren"},...]
}

Now what I do is I store my hosts and queue separately in my redux store like this-

this.props.dispatch({
        type: GET_ROOM_HOSTS,
        payload: info['hosts']
      })

this.props.dispatch({
        type: GET_ROOM_QUEUE,
        payload: info['queue']
      })

where info is the object received from the api call as shown above. Now I mapStateToProps these two from the redux store to the default screen component such that-

1. this.props.roomQueue is for queue and
2. this.props.roomHosts is for hosts

My FlatList's are like this-

<FlatList
   data={this.props.roomQueue}
   horizontal={true}
   keyExtractor = {item => item.id}
   renderItem({item} => {
    return(
        <customComponent (with suitable props) ..../>
        )
    })
/>

<FlatList
   data={this.props.roomHosts}
   numColumns={3}
   keyExtractor = {item => item.id}
   renderItem({item} => {
    return(
        <customComponent (with suitable props) ..../>
        )
    })
/>

PLEASE NOTE that both the FlatList's are present in the same Component (React.Component) of the screen and are displayed at different parts of the screen(queue at bottom of the screen and hosts at the top of the screen). Also queue and hosts are independent of each other. Screen looks like this

My problem is that even if there is a change in this.props.roomQueue, the FlatList having its data={this.props.roomHosts} get's re-rendered.

How do i prevent this re-render to ensure that only if the FlatList's corresponding data changes, then only will it re-render, otherwise it won't. Do I have to change the way I store queue and hosts? or is there something else?

Answer 1

You can add List ListFooterComponent and it will automatically do this for you

<FlatList
      contentContainerStyle={{
        width: WINDOW_WIDTH,
        paddingVertical:WINDOW_WIDTH*0.2,
        marginLeft:10
      }}
      ListFooterComponent={()=> returnYourViewDesignHere()}
      columnWrapperStyle={{ flex: 1, justifyContent: "space-around" }}
      keyExtractor={(item) => item.id}
      onEndReached={() => getPaginationData()}
      onEndReachedThreshold={0.0001}
      numColumns={3}
      showsVerticalScrollIndicator={false}
      data={allShows}
      renderItem={({ item, index }) => {
        return (
          <TouchableWithoutFeedback
            key={item.index + Math.floor(Math.random() * 1000)}
            onPress={() =>
              props.navigation.navigate(
                item.type == "movie" ? "MovieDetailScreen" : "SeasonDetail",
                {
                  data: item,
                  object: {
                    id: item.id,
                  },
                }
              )
            }
          >
            <View style={styles.boxContainer}>
              <View style={styles.imageBackground}>
                <Text style={styles.backgroundText}>KEIN</Text>
                <Text
                  style={[styles.backgroundText, { color: COLOR.primary }]}
                >
                  POSTER
                </Text>
              </View>
              <Image
                source={{
                  uri: item.coverUrl ? item.coverUrl : item.coverPath,
                }}
                style={styles.imageBox}
                resizeMode={"stretch"}
              />
              <Text
                numberOfLines={2}
                ellipsizeMode={"tail"}
                style={styles.text}
              >
                {item.showTitle ? item.showTitle : item.title}
              </Text>
              {userWatchedList.some((uwl) => uwl.id == item.id) ? (
                <TouchableWithoutFeedback
                  onPress={() =>
                    isloggedIn
                      ? removeFromUserWatchList(item)
                      : handleModalVisibility()
                  }
                >
                  <Image
                    source={WATCHLIST_CHECKED}
                    style={{
                      width: 25,
                      height: 25,
                      position: "absolute",
                      right: 5,
                      top: 5,
                    }}
                  />
                </TouchableWithoutFeedback>
              ) : (
                <TouchableWithoutFeedback
                  onPress={() =>
                    isloggedIn
                      ? addToUserWatchList(item)
                      : handleModalVisibility()
                  }
                >
                  <Image
                    source={CIRCLE_UNCHECKED}
                    style={{
                      width: 25,
                      height: 25,
                      position: "absolute",
                      right: 5,
                      top: 5,
                    }}
                  />
                </TouchableWithoutFeedback>
              )}
            </View>
          </TouchableWithoutFeedback>
        );
      }}
    />

Answer 2

You can do this with using only one flatlist. Merge your both array's into one and show results from one list.. you can spare them in ui with a type.

This is a genuine procedure of what developers do, cz rendering 2 list in same page and same direction is accually no mean. Your query is valid.