react-native array.map() performance

Question

I have an app that's fetching a JSON array and array mapping them. There are two nested array maps in the original map.

There are 75 separate results in the array - which contain 6 objects and 1 array. So on average there are around 1800 elements to map.

The fetch takes around 2 seconds to complete and the array mapping can take anywhere between 8-10 secs.

Is there any way I can improve on this speed?

trains.results.services.map((traininfo,index) => (

<ScrollView refreshControl={
<RefreshControl refreshing={this.state.refreshing} onRefresh= {this._onRefresh.bind(this)} /> }  key={traininfo.std+index.toString()} style={styles.slide1}>

<View key={'row'+index.toString()}  style={{flex: 1, flexDirection: 'row'}}>

{traininfo.platform===null ? (
<Text key={traininfo.platform+index.toString()} style={styles.platform}>Platform _</Text>
          ) : (
 <Text key={traininfo.platform+index.toString()} style={styles.platform}>Platform {traininfo.platform}</Text>
          )}  

{traininfo.etd==='On time' || traininfo.etd==='Cancelled' || traininfo.etd==='Delayed' ? (
<Text key={traininfo.etd+index.toString()} style={styles.time}>{traininfo.etd}</Text>
          ) : (
<Text key={traininfo.etd+index.toString()} style={styles.time}>Exp: {traininfo.etd}</Text>
          )}

         </View>

         {Object.keys(traininfo.destination).length>1 ? (

           traininfo.destination.map((dest,index) => (

          <View key={'cont'+index.toString()}>
             <View key={'row1'+index.toString()} style={{flex: 1, flexDirection: 'row'}}>
             {index===0 ? (
               <Text key={traininfo.std+index.toString()} style={styles.std}>{traininfo.std}</Text>
               ) : (<Text key={traininfo.std+index.toString()} style={styles.std1}>{traininfo.std}</Text>)}

             <Text style={styles.destination}>{dest.locationName}</Text>
             </View>
             <View key={'row11'+index.toString()} style={{flex: 1, flexDirection: 'row'}}>    
             {dest.via !== null ? (
             <Text key={dest.via+index.toString()} style={styles.via}>{dest.via}</Text>
            ) : (null)}
            </View>
             </View>

            ))

          ) : (

          <View>
           <View key={'row1'+index.toString()} style={{flex: 1, flexDirection: 'row'}}>
           <Text key={traininfo.std+index.toString()} style={styles.std}>{traininfo.std}</Text>
          <Text key={traininfo.destination[0].locationName+index.toString()}  style={styles.destination}>{traininfo.destination[0].locationName}</Text>  
          </View>

           <View key={'row11'+index.toString()} style={{flex: 1, flexDirection: 'row'}}>    
             {traininfo.destination[0].via !== null ? (
             <Text key={traininfo.destination[0].via+index.toString()} style={styles.via}>{traininfo.destination[0].via}</Text>
            ) : (null)}
            </View>

            </View>

          )}

           {traininfo.delayReason || traininfo.cancelReason  ? (

          <View key={'delay'+index.toString()} style={{flex: 1, flexDirection: 'row'}}>

          {traininfo.delayReason !== "undefined" ? (
            <Text key={'delayReason1'+index.toString()} style={{color:'#fff',fontFamily:'Lato-Medium', fontSize:16,marginBottom:0,marginTop:10}}>{traininfo.delayReason}</Text>
            ) : (null)}

           {traininfo.cancelReason !== "undefined" ? (
            <Text key={'delayReason2'+index.toString()} style={{color:'#fff',fontFamily:'Lato-Medium', fontSize:16,marginBottom:0,marginTop:10}}>{traininfo.cancelReason}</Text>
            ) : (null)}

         </View>             

          ) : (
          null
          )}

           <View key={'length'+index.toString()} style={{flex: 1, flexDirection: 'row'}}>    
             {traininfo.length !== null ? (
             <Text key={traininfo.length+index.toString()} style={styles.length}>{traininfo.length} Car Train</Text>
            ) : (null)}
          </View>   

        <View key={'row2'+index.toString()} style={{flex: 1, flexDirection: 'row'}}>
         <Text key={'calling'+index.toString()} style={{color:'#fff',fontFamily:'Lato-Bold', fontSize:18,marginBottom:0,marginTop:10}}>Callling at:</Text>
         </View>

         <View key={'dest'+index.toString()} style={{marginBottom:40,marginTop:10}}>

         <View key={'destview'+index.toString()} style={{backgroundColor:'black'}}>


               {traininfo.dest[0].map((stops,index) => (


                 <View key={stops.crs}>

              {index===Object.keys(traininfo.dest[0]).length-1 ? (
              <Image key={stops.crs+'1'}  source={require('../Images/dest.png')} style={{width:22,height:22,position:'absolute',top:8,zIndex:9999}}/>
            ) : (

               <Image key={stops.crs+'2'} source={require('../Images/dest1.png')} style={{marginLeft:7,width:30,height:52,position:'absolute',top:15,zIndex:9999}}/>
            ) }

              {stops.et==='On time' ? (

             <View key={stops.crs+'3'}>
             <Text key={stops.crs+'4'} style={{color:'#fff',fontSize:20,fontFamily:'Lato-Medium',marginTop:4,paddingLeft:37}}>{stops.loc}</Text>
             <Text key={stops.crs+'5'} style={{fontSize:14,color:'#fff001',marginLeft:37}}>{stops.st}</Text>
             </View>

            ) : (

            <View key={stops.crs+'6'}>
            <Text key={stops.crs+'7'} style={{color:'#fff',fontSize:20,fontFamily:'Lato-Medium',marginTop:4,paddingLeft:37}}>{stops.loc}</Text>
             {stops.et==='Cancelled' || stops.et==='Delayed'  ? (
               <Text key={stops.crs+'8'} style={{fontSize:14,color:'#fff001',marginLeft:37}}>{stops.st}<Text style={{fontSize:14,color:'#33b2f4',marginLeft:37}}>  {stops.et}</Text></Text>
              ) : (
               <Text key={stops.crs+'9'} style={{fontSize:14,color:'#fff001',marginLeft:37}}>{stops.st}<Text style={{fontSize:14,color:'#33b2f4',marginLeft:37}}>  Exp: {stops.et}</Text></Text>
              ) }

             </View>
            )}

              </View>

              ))}

               {traininfo.dest.length===2 ? (

                    traininfo.dest[1].map((stops,index) => (


                                 <View key={stops.crs}>

              {index===Object.keys(traininfo.dest[1]).length-1 ? (
              <Image key={stops.crs+'1'}  source={require('../Images/dest.png')} style={{width:22,height:22,position:'absolute',top:8}}/>
            ) : (

               <Image key={stops.crs+'2'} source={require('../Images/dest1.png')} style={{marginLeft:7,width:30,height:52,position:'absolute',top:15}}/>
            ) }



              {stops.et==='On time' ? (

             <View key={stops.crs+'3'}>
             <Text key={stops.crs+'4'} style={{color:'#fff',fontSize:20,fontFamily:'Lato-Medium',marginTop:4,paddingLeft:37}}>{stops.loc}</Text>
             <Text key={stops.crs+'5'} style={{fontSize:14,color:'#fff001',marginLeft:37}}>{stops.st}</Text>
             </View>

            ) : (

            <View key={stops.crs+'6'}>
            <Text key={stops.crs+'7'} style={{color:'#fff',fontSize:20,fontFamily:'Lato-Medium',marginTop:4,paddingLeft:37}}>{stops.loc}</Text>
             {stops.et==='Cancelled' || stops.et==='Delayed'  ? (
               <Text key={stops.crs+'8'} style={{fontSize:14,color:'#fff001',marginLeft:37}}>{stops.st}<Text style={{fontSize:14,color:'#33b2f4',marginLeft:37}}>  {stops.et}</Text></Text>
              ) : (
               <Text key={stops.crs+'9'} style={{fontSize:14,color:'#fff001',marginLeft:37}}>{stops.st}<Text style={{fontSize:14,color:'#33b2f4',marginLeft:37}}>  Exp: {stops.et}</Text></Text>
              ) }

             </View>
            )}

              </View>

                ))

                ) : (null)}

         </View>
         <Text style={{color:'#fff',fontSize:22,marginTop:20, fontFamily:'Lato-Bold'}}>{traininfo.operator}</Text>
         </View>

      </ScrollView>

        ))

Answer 1

While you might see a slight benefit to switching to a for loop here are a few other things to try first:

• Do this transformation on the server and use caching if possible.
• Require the user to interact with the application before calculating more detail; the user doesn't need ~1800 pieces of information on the screen before rendering.
• Improve perceived performance by only translating what the user will immediately see before rendering. For example translate the first three records, render them, and translate the rest in the background.

Answer 2

I recommend you to use Flatlist. This can be more flexible and fully cross platform. It also has pagination which can be used to increase speed and also performance. Please go through this link