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 Code in Web. Its Worked Perfectly Without lag, Only React Native has This Issue.

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: 5 }, () => ({
      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",
  },
});