Large amount of data affecting performance

Question

I have a huge list of data that I want to send to a different screen when I am transitioning, but the problem I am experiencing is a performance issue. Like when I transition, the response time takes about 2-3 seconds for it to transfer and it's not very responsive.

Here's my code setup of what I have:

const PopularNow = (props) => {

return (
   <FlatList
        data={props.data}
        keyExtractor={item => item.id.toString()} //id.toString()
        horizontal
        showsHorizontalScrollIndicator={false}
        style={{paddingLeft: 10}}
        ItemSeparatorComponent={() => <ItemSeparator width={20} />}
        ListHeaderComponent={() => <ItemSeparator width={20} />}
        ListFooterComponent={() => <ItemSeparator width={50} />}
        renderItem={({item}) => {


  if (item.cover.image_id) {
            
            return (
              <TouchableOpacity
                activeOpacity={0.7}
                onPress={() =>
                  props.navigation.push('GamePreview', {
                    gameName: item.name,
                    gameCover: item.cover.image_id,
                    gameReleased: item.first_release_date,
                    total_Rating: item.total_rating,
                    gamePlatforms: item.platforms,
                    gameSummary: item.summary,
                    similarGames: item.similar_games,
                    Screenshot: item.screenshots,
                    Videos: item.videos,
             ====>  involveCompanies: item.involved_companies,
                    gameGenres: item.genres,
                    artworks: item.artworks,
                    age_Rating: item.age_ratings,
                    age_Rating_Description: item.age_ratings,
                    gameModes: item.game_modes,
                    multiplayerModes: item.multiplayer_modes,
                    playerPerspectives: item.player_perspectives,
                    gameEngine: item.game_engines,
                    gameSeries: item.collection,
                    gameDLC: item.dlcs,
                  })
                }>
                <Image
                  resizeMode="cover"
                  style={styles.containerGames}
                  source={{uri: getImage(item.cover.image_id)}}
                />
              </TouchableOpacity>
            );
          }
        }}
      />
   }
)

the involved_companies is what makes the screen transition very slow because of the amount of companies I invoke from the api. When I comment this out the performance is very responsive. I want to know if there is an alternative to improve performance with a large amount of data.

Answer 1

I would suggest not to pass the whole data to the next screen. The listing should only display what it's need to be display (based on your design).

All you need is just to pass the id, so in the GamePreview screen will have to call another API to get game preview detail.

By doing this, you GamePreview screen is deeplink-able because you may allow user to share the game preview detail link. If using current way, your link have to contains all the params and which is not possible because some property is object.

It should work when reduce amount of unnecessary data. If it's still doesn't work for your case, you can try this awesome library flash-list