Rendering Slow

[mcatal]

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 {data}
return {data};
} else {
return {data};
}
};

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",

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?