React Native FlatList makes app extremely slow after 10 elements

I am trying to build a simple stopwatch app in react-native. I'm using AsyncStorage to store the time recorded data into local storage, along with that I would like to display a table that shows all the recorded times. The core idea is that when a person presses and holds a LottieView animation, it will start a timer, when they press out, the timer stops, records in AsyncStorage and then updates the table.

After 10 elements, my FlatList (inside TimeTable.jsx) becomes extremely slow and I am not sure why. The component that is causing this error is I believe TimeTable.jsx but I am not quite sure why.

src/components/Timer/TimeTable.jsx

import React, {useState, useEffect} from 'react'  import { StyleSheet, FlatList  } from "react-native";  import { Divider, List, ListItem } from '@ui-kitten/components'  import AsyncStorage from '@react-native-async-storage/async-storage';    const getRecordedEventsTable = async (dbKey) => {    try {      let currentDataArray = await AsyncStorage.getItem(dbKey.storageKey);      return currentDataArray ? JSON.parse(currentDataArray) : [];    } catch (err) {      console.log(err);    }  };    const renderItem = ({ item, index }) => (    <ListItem    title={`${item.timeRecorded / 1000} ${index + 1}`}    description={`${new Date(item.timestamp)} ${index + 1}`}     />  )    export const TimeTable = (storageKey, timerOn) => {    const [timeArr, setTimeArr] = useState([]);      useEffect(() => {      getRecordedEventsTable(storageKey).then((res) => {          setTimeArr(res)      })      }, [timeArr, timerOn])      return (        <FlatList          style={styles.container}          data={timeArr}          ItemSeparatorComponent={Divider}          renderItem={renderItem}          keyExtractor={item => item.timestamp.toString()}        />    );  };    const styles = StyleSheet.create({      container: {        maxHeight: 200,      },    });  

src/components/Timer/Timer.jsx

import React, {useState, useEffect, useRef} from 'react'  import {      View,      StyleSheet,      Pressable,  } from 'react-native';  import {Layout, Button, Text} from '@ui-kitten/components';  import LottieView from 'lottie-react-native'  import AsyncStorage from '@react-native-async-storage/async-storage';  import {TimeTable} from './TimeTable'    const STORAGE_KEY = 'dataArray'    const styles = StyleSheet.create({      container: {          flex: 1,           justifyContent: "center",          alignItems: "center",          backgroundColor: "#E8EDFF"      },      seconds: {          fontSize: 40,          paddingBottom: 50,      }  })    const getRecordedEventsTable = async () => {      try {          let currentDataArray = await AsyncStorage.getItem(STORAGE_KEY)          return currentDataArray ? JSON.parse(currentDataArray) : []      } catch (err) {          console.log(err)      }  }    const addToRecordedEventsTable = async (item) => {      try {          let dataArray = await getRecordedEventsTable()          dataArray.push(item)                await AsyncStorage.setItem(              STORAGE_KEY,              JSON.stringify(dataArray)              )      } catch (err) {          console.log(err)      }  }    // ...    const Timer = () => {      const [isTimerOn, setTimerOn] = useState(false)      const [runningTime, setRunningTime] = useState(0)      const animation = useRef(null);        const handleOnPressOut = () => {          setTimerOn(false)          addToRecordedEventsTable({              timestamp: Date.now(),              timeRecorded: runningTime          })            setRunningTime(0)      }         useEffect(() => {          let timer = null            if(isTimerOn) {              animation.current.play()                const startTime = Date.now() - runningTime              timer = setInterval(() => {                  setRunningTime(Date.now() - startTime)              })          } else if(!isTimerOn) {              animation.current.reset()              clearInterval(timer)          }            return () => clearInterval(timer)      }, [isTimerOn])        return (          <View>              <Pressable onPressIn={() => setTimerOn(true)} onPressOut={handleOnPressOut}>                  <LottieView ref={animation} style= source={require('../../../assets/record.json')} speed={1.5}/>              </Pressable>              <Text style={styles.seconds}>{runningTime/1000}</Text>              <TimeTable storageKey={STORAGE_KEY} timerOn={isTimerOn} />              <Button onPress={resetAsyncStorage}>Reset Async</Button>          </View>      )  }    export default Timer  

Any help, appreciated. Thanks.

https://stackoverflow.com/questions/66148086/react-native-flatlist-makes-app-extremely-slow-after-10-elements February 11, 2021 at 10:49AM