Rendering Slow - Githubissues

Hello,

I'm pulling 150KB of data via an API and updating the state. Afterward, the table creation takes more than 10 seconds. How can I overcome this issue?

I made a fresh installation with Expo Go SDK 49 and installed only axios and react-native-reanimated-table for demonstration purposes. Even then, it takes a significant amount of time. My package dependencies are as follows: "dependencies": { "axios": "^1.5.0", "expo": "~49.0.8", "expo-constants": "^14.4.2", "expo-status-bar": "~1.6.0", "react": "18.2.0", "react-native": "0.72.4", "react-native-reanimated-table": "^0.0.2" }

My App.tsx is as follows:

`import Constans from "expo-constants"; import { useEffect, useState } from "react"; import { StatusBar } from "expo-status-bar"; import { makeApiRequest } from "./_src/Functions/makeApiRequest";

import { TableWrapper, Cell, Table, Row } from "react-native-reanimated-table";

import { ScrollView, StyleSheet, Text, TouchableOpacity, View } from "react-native";

export default function App() { const apiKeys = Constans.expoConfig?.extra;

const sendFormData = { franchise: "Kamyon", period: "Toplam", selectedYear: 2023, };

const [tableData, setTableData] = useState({ tableHead: ["", "Araç Adı", "Stok Gün", "Tah. Stok Faiz"], flexArr: [0.000001, 2, 0.6, 1, 0.000001], tData: [], tableShow: false, });

const fetchData = async () => { const totalFetchDataStartTime = Date.now(); // Toplam süre için zamanlayıcı başlat

const apiRequestStartTime = Date.now(); // API isteği için zamanlayıcı başlat
const data = await makeApiRequest({
  url: "_getPossibleBonusDetail",
  ...sendFormData,
});
const apiRequestEndTime = Date.now(); // API isteği için zamanlayıcı bitir
console.log(`API Request Time: ${apiRequestEndTime - apiRequestStartTime} ms`);

if (!data.error) {
  const stateUpdateStartTime = Date.now(); // State güncelleme için zamanlayıcı başlat
  setTableData(oldData => ({
    ...oldData,
    tableShow: true,
    tData: data?.rowsForTable,
  }));
  const stateUpdateEndTime = Date.now(); // State güncelleme için zamanlayıcı bitir
  console.log(`State Update Time: ${stateUpdateEndTime - stateUpdateStartTime} ms`);

  console.log("State yüklendi");
}

const totalFetchDataEndTime = Date.now(); // Toplam süre için zamanlayıcı bitir
console.log(`Total fetchData Time: ${totalFetchDataEndTime - totalFetchDataStartTime} ms`);

};

useEffect(() => { console.log("Gelen Datalar"); fetchData(); }, []);

const TableCont = () => { const element = (data: any, cellIndex: any, dataIndex: any) => { if (cellIndex === 0 || cellIndex === 4) { return {data}; } else if (cellIndex === 1) { return (

{data}

    );
  } else if (cellIndex === 3) {
    //return <Text style={styles.textStyleCenter}>{data}</Text>
    return <Text style={styles.textStyleCenter}>{data}</Text>;
  } else {
    return <Text style={styles.textStyleCenter}>{data}</Text>;
  }
};

return (
  <>
    <Table borderStyle={styles.tableStyle}>
      <Row data={tableData?.tableHead} flexArr={tableData?.flexArr} style={styles.headStyle} textStyle={styles.headTextStyle} />
    </Table>

    <ScrollView style={{ flex: 1 }}>
      <Table borderStyle={{ borderWidth: 1, borderColor: "#C1C0B9" }}>
        {tableData?.tData.map((rowData: any, index: any) => (
          <TableWrapper key={index} style={index % 2 == 0 ? styles.rowOdd : styles.rowEven}>
            {rowData.map((cellData: any, cellIndex: any, i: any) => (
              <Cell key={cellIndex} flex={tableData?.flexArr[cellIndex]} textStyle={styles.textStyleCenter} data={cellData} />
            ))}
          </TableWrapper>
        ))}
      </Table>
    </ScrollView>
  </>
);

};

return (

{apiKeys?.APP_VERSION.buildNumber} {!tableData.tableShow ? null : }

); }

const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: "#fff", alignItems: "center", justifyContent: "center", }, headStyle: { height: 25, backgroundColor: "#0ea5e9", }, rowEven: { height: 39, backgroundColor: "#1f2937", flexDirection: "row", }, rowOdd: { height: 39, backgroundColor: "#111827", flexDirection: "row", }, headTextStyle: { color: "#ffffff", fontWeight: "400", favicon

marginHorizontal: 5,
textAlign: "center",
fontSize: 13,

}, textStyleLeft: { marginLeft: 7, color: "#e7e5e4", textAlign: "left", fontWeight: "100", fontSize: 13, }, textStyleCenter: { color: "#e7e5e4", textAlign: "center", fontWeight: "200", fontSize: 14, }, textStyleRight: { marginRight: 7, color: "#e7e5e4", textAlign: "right", fontWeight: "200", fontSize: 14, }, tableStyle: { borderWidth: 0.5, borderColor: "#ffffff", }, }); `

Console logs and loading information are as follows: ` LOG Received Data LOG Request Time: 202 ms LOG 153192 LOG API Request Time: 210 ms LOG State Update Time: 8664 ms LOG State loaded LOG Total fetchData Time: 8874 ms

When I review the logs, it takes approximately 8876 ms. However, when I remove the table and display the data simply within a Text element, the time becomes:

LOG Received Data LOG Request Time: 194 ms LOG 153192 LOG API Request Time: 201 ms LOG State Update Time: 12 ms LOG State loaded LOG Total fetchData Time: 213 ms

What can I do? What should I check?

dohooo / react-native-reanimated-table

Rendering Slow #2