IN React Native Toggle Check Box Causes Lag

Question

In React Native I Rendered 360 CheckBoxes, While Toggling a Check Box causes Lag. If I Decrease The Check Boxes from 360 to 10 like that, its works fine. but whats problem with more check boxes, how to handle it. I tried this in React Native Web, Its Worked Perfectly Without lag, Even On Web Nearly 2000 Checkboxes can also Worked Better Than React Native with 360 checkBoxes. What Causes Bad Performance in React Native for Android ?

Table.js:

import React, { useState, useEffect, useCallback, useMemo } from "react";
import { Text, View, StyleSheet, ScrollView } from "react-native";
import CheckBox from "./CheckBox";

export default function Table() {
  const [data, setData] = useState(
    Array.from({ length: 60 }, () => ({
      id: "xxxxxx",
      name: "John",
      result: [true, false, true, false, true, false],
    }))
  );

  const handleCheckBox = useCallback((stdIndex, resIndex) => {
    setData((prv) => {
      const item = { ...prv[stdIndex] };
      if (item) {
        item.result[resIndex] = !item.result[resIndex];
        const newData = [...prv];
        newData[stdIndex] = item;
        return newData;
      }
      return prv;
    });
  }, []);

  //   const handleCheckBox3 = useCallback((stdIndex, resIndex) => {
  //     setData((prv) => {
  //       const newData = [...prv];
  //       const item = { ...newData[stdIndex] };
  //       item.result[resIndex] = !item.result[resIndex];
  //       newData[stdIndex] = item;
  //       return newData;
  //     });
  //   }, []);
  //   function handleCheckBox2(stdIndex, resIndex) {
  //     data[stdIndex]["result"][resIndex] = !data[stdIndex]["result"][resIndex];
  //     setData([...data]);
  //   }

  const renderCheckBoxes = useCallback(
    (item, stdIndex) => {
      return item.result.map((item, resIndex) => (
        <CheckBox
          key={stdIndex + "x" + resIndex}
          checked={item}
          onPress={() => handleCheckBox(stdIndex, resIndex)}
        />
      ));
    },
    [handleCheckBox]
  );

  const renderRows = useMemo(() => {
    return data.map((item, stdIndex) => (
      <View
        key={stdIndex}
        style={[
          s.row,
          {
            backgroundColor: stdIndex % 2 === 0 ? "#f9f9f9" : "#fff",
          },
        ]}
      >
        <View style={(s.cell, s.cellRollNo)}>
          <Text style={s.cellText}>{stdIndex}</Text>
        </View>
        <View style={s.resultRow}>{renderCheckBoxes(item, stdIndex)}</View>
      </View>
    ));
  }, [data, renderCheckBoxes]);

  return <ScrollView style={s.tableContainer}>{renderRows}</ScrollView>;
}

const s = StyleSheet.create({
  tableContainer: {
    flex: 1,
    paddingVertical: 12,
  },
  headRow: {
    flexDirection: "row",
    paddingVertical: 12,
    paddingHorizontal: 12,
    backgroundColor: "#f9f9f9",
    borderTopLeftRadius: 8,
    borderTopRightRadius: 8,
  },
  resultRow: {
    flexDirection: "row",
    paddingHorizontal: 0,
    alignItems: "center",
    flexGrow: 1,
    justifyContent: "space-between",
  },
  row: {
    flexDirection: "row",
    alignItems: "center",
    paddingHorizontal: 12,
    width: "100%",
    flex: 1,
  },
  cell: {
    paddingHorizontal: 20,
    paddingVertical: 8,
    borderBottomWidth: 1,
  },
  cellRollNo: {
    width: 40,
    paddingLeft: 0,
  },
  cellText: {
    color: "#dcdcdc",
  },
});

CheckBox.js

import React, { useState, useEffect } from "react";

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

export default function CheckBox({ checked, onPress }) {
  //   const [s, setS] = useState(defaultValue);
  return (
    <View>
      <TouchableOpacity onPress={onPress}>
        <View style={[ss.box, checked ? ss.checked : ss.unchecked]}>
          <Text style={ss.text}>{checked && "✘"} </Text>
        </View>
      </TouchableOpacity>
    </View>
  );
}

const ss = StyleSheet.create({
  box: {
    width: 24,
    height: 24,
    marginHorizontal: 8,
    marginVertical: 7,
    borderWidth: 1,
    borderColor: "#e283d5",
    borderRadius: 5,
  },
  unchecked: {
    // borderRadius: 14,
  },
  checked: {
    // borderRadius: 50,
    justifyContent: "center",
    alignItems: "center",
    paddingBottom: 3,
    paddingLeft: 2.5,
    backgroundColor: "#e283d5",
  },
  text: {
    color: "#fdefff",
  },
});