title: React Native Count up Timer inside FlatList
body: <p>Hi I'm new to React Native and now I'm trying to create count up timer inside each Flat List row. The calculation based on data timestamp compare to current date. My countdown interval is working for each row but the problem now is performance. In Android sometimes is causing ANR (Application not responding).</p>
  <p>Is there any suggestion that I can do to improve this code? Really appreciate for any kind help.
  Thank you.</p>
  <pre><code>  import React, { useState, useEffect } from 'react'
      import { View, Text, ActivityIndicator, Modal, FlatList } from 'react-native'
      import Style from '../../../../constants/Style'
      import AsyncStorage from '@react-native-community/async-storage'
      import { API, Auth } from 'aws-amplify'
      import AWSMQTTConnection from '../../../../common/AWSMQTTConnection'
      import AsyncStorageConstants from '../../../../constants/AsyncStorageConstants'
      
      var isLeaving = false
      
      
      function EquipmentElement({ id, name, number, status, time, maintenanceCode }) {
      
          const [hours, setHours] = useState('00')
          const [minutes, setMinutes] = useState('00')
          const [seconds, setSeconds] = useState('00')
      
          var count = setInterval(() =&gt; {
              var now = new Date().getTime()
              var distance = now - time
      
              var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))
              var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60))
              var seconds = Math.floor((distance % (1000 * 60)) / 1000)
      
              var isHourLessThanTen = hours &lt; 10
              var isMinuteLessThanTen = minutes &lt; 10
              var isSecondLessThanTen = seconds &lt; 10
      
              if (isHourLessThanTen) {
                  hours = '0' + hours
              }
      
              if (isMinuteLessThanTen) {
                  minutes = '0' + minutes
              }
      
              if (isSecondLessThanTen) {
                  seconds = '0' + seconds
              }
      
      
              if ((status == 'Available' || status == undefined) || maintenanceCode == 1) {
                  clearInterval(count)
              } else {
                  if (isLeaving) {
                      clearInterval(count)
                  } else {
                      setHours(hours)
                      setMinutes(minutes)
                      setSeconds(seconds)
                  }
              }
      
          }, 1000)
      
      
          const setDurationValue = () =&gt; {
              if (maintenanceCode == 1) {
                  &lt;Text style={Style.value}&gt;00:00:00&lt;/Text&gt;
              } else {
                  if (time != 0 || time != '' || time == undefined) {
                      return (&lt;Text style={Style.value}&gt;{hours}:{minutes}:{seconds}&lt;/Text&gt;)
      
                  } else {
                      return (&lt;Text style={Style.value}&gt;00:00:00&lt;/Text&gt;)
                  }
              }
          }
      
          return (
              &lt;View style={Style.smartElementContainer}&gt;          
                   {setDurationValue()}                  
              &lt;/View&gt;
          )
      }
      
      function Equipment() {
      
          const [equipmentData, setEquipmentData] = useState([])
        
          useEffect(() =&gt; {
      
              isLeaving = false
              getEquipmentList(false)
      
              return function cleanup() {
                  console.log('unmounting...')
                  isLeaving = true
                  setEquipmentData([])
              }
      
          }, [])
  
   const getEquipmentList = async (isMQTT) =&gt; {
          try {
             
              let propertyId = await AsyncStorage.getItem(AsyncStorageConstants.StorageConstants.CURRENT_PROPERTY_ID)
              let apiName = 'DemoAsiaIoT'
              let path = '/scdevice'
              let request = {
                  headers: { Authorization: `Bearer ${(await Auth.currentSession()).getIdToken().getJwtToken()}` },
                  response: true,
                  queryStringParameters: {
                      propertyId: propertyId,
                      applicationId: 5
                  }
              }
  
              await API.get(apiName, path, request).then(response =&gt; {
                  var data = response.data.resultData
                  var devices = []
  
                  for (var i = 0; i &lt; data.length; i++) {
                      var device = data[i]
                      devices.push({ id: device.deviceEUI, name: device.deviceName, number: '01', status: device.status, time: device.timestampStart, maintenanceCode: device.manualOverRide })
          
                  }
  
                  setEquipmentData(devices)
                  
              }).catch(error =&gt; {
                  console.log('Error from request - ', error.response)
              })
  
  
          } catch (err) {
              console.log('error:', err)
          }
      }
  
      
              return (
              &lt;View style={{ flex: 1 }}&gt;
                  &lt;FlatList
                      style={{
                          width: '100%',
                          marginTop: 10,
                      }}
                      showsVerticalScrollIndicator={false}
                      vertical={true}
                      data={equipmentData}
                      renderItem={({ item }) =&gt; &lt;EquipmentElement id={item.id} name={item.name} number={item.number} status={item.status} time={item.time} maintenanceCode={item.maintenanceCode} /&gt;}
                      keyExtractor={item =&gt; item.id} /&gt;
              &lt;/View&gt;
          )
      }
      
      export default Equipment
  </code></pre>