MUI의 DataGrid에 Serverside Pagination 설치

하고 싶은 일

mui의 DataGrid와 Datables를 사용하여 API에서 얻은 수천 개의 데이터를 편집하고 표시하면 브라우저가 굳어집니다.
기타 도구.등 많은 시도를 했고 역시 굳는다는 것을 확인했다.
결과는 MUI로 돌아갔고 DataGrid Datatabels에서든 DataGrid에서든 서버-sid pagination으로 표시되는 모드로 설정할 수 있음을 발견했다.
서버 쪽에서 한 페이지의 줄만 캡처해서 표시하면 굳지 않을 것 같습니다.

MUI 데이터 Grid를 서버-side pagination 모드로 설정

https://mui.com/components/data-grid/pagination/#server-side-pagination
이 예를 사용하여 DemoData를 API로 변경하여 데이터를 가져옵니다.

import React, { useState, useEffect, useContext } from "react";
import {
  DataGrid,
  GridColDef,
} from "@mui/x-data-grid";
import { TableData, TableDataSet } from "../../types/WebData";
import {
  setDataGrid,
  getSensor,
} from "../../api/test";
import { AuthInfoContext } from "../../context/AuthContext";
import TestDataSearchPdf from "./TestDataSearchPdf";

const columns: GridColDef[] = [
  { field: "id", headerName: "ID", hide: true },
  { field: "observe_dt", headerName: "日時", width: 200 },
  {
    field: "observe_type_name",
    headerName: "種類",
    width: 100,
    editable: false,
  },
  {
    field: "area_name",
    headerName: "エリア",
    width: 150,
    editable: false,
  },
  {
    field: "lpwa_code",
    headerName: "XX ID",
    width: 110,
    editable: false,
  },
  {
    field: "observe_value",
    flex: 1,
    headerName: "値",
    sortable: true,
    width: 300,
  },
];

/**
 * Simulates server data loading
 * 全件データを１ページ分の行にsliceしている
 * 値に単位をつけるなどのデータの編集も、ここで１ページ分のみ行う
 */
const loadServerRows = (
  page: number,
  pageSize: number,
  allRows: TableDataSet[]  // 全件データ配列
): Promise<TableDataSet[]> =>
  new Promise<TableDataSet[]>((resolve) => {
    resolve(
      // １ページ分にsliceした後に、データを編集するfunctionに渡している
      setDataGrid(allRows.slice(page * pageSize, (page + 1) * pageSize))
    );
  });


const useQuery = (
  page: number,
  pageSize: number,
  allRows: TableDataSet[]
) => {
  const [rowCount, setRowCount] = React.useState<number | undefined>(undefined);
  const [isLoading, setIsLoading] = React.useState<boolean>(false);
  const [data, setData] = React.useState<TableDataSet[]>([]);

  React.useEffect(() => {
    let active = true;

    setIsLoading(true);
    setRowCount(undefined);
    loadServerRows(page, pageSize, allRows).then((newRows) => {
      if (!active) {
        return;
      }
      setData(newRows);
      setIsLoading(false);
      setRowCount(allRows.length);
    });

    return () => {
      active = false;
    };
  }, [page, pageSize, allRows]);

  return { isLoading, data, rowCount };
};

interface RowsState {
  page: number;
  pageSize: number;
}

const ServerDataGrid = () => {
  const [testData, setTestData] = useState<TableData>({ data: [] });
  useEffect(() => {
    const getTestData = async () => {
      // APIでデータget
      const result = await getTest();
      setTestData(result);
    };
    getTestData();
  }, []);

  // ページのstate　１ページに１０行
  const [rowsState, setRowsState] = React.useState<RowsState>({
    page: 0,
    pageSize: 10,
  });

  const { isLoading, data, rowCount } = useQuery(
    rowsState.page,
    rowsState.pageSize,
    testData.data // APIで取得した全件データ
  );

  // データの読み込みが間に合ってなくてrowCountがundefinedのままの場合の対策
  const [rowCountState, setRowCountState] = React.useState(rowCount || 0);
  React.useEffect(() => {
    setRowCountState((prevRowCountState) =>
      rowCount !== undefined ? rowCount : prevRowCountState
    );
  }, [rowCount, setRowCountState]);

  return (
    <div style={{ height: 670, width: "100%" }}>
      {/* <TestDataSearchPdf exportData={testData.data} /> */}
      <DataGrid
        columns={columns}
        rows={data}
        rowCount={rowCountState}
        loading={isLoading}
        rowsPerPageOptions={[10]}
        pagination
        {...rowsState}
        paginationMode="server"
        onPageChange={(page) => setRowsState((prev) => ({ ...prev, page }))}
        onPageSizeChange={(pageSize) =>
          setRowsState((prev) => ({ ...prev, pageSize }))
        }
      />
    </div>
  );
};

export default ServerDataGrid;

과제.

동일한 데이터.실제 설치된 것을 사용하지만 같은 대량의 페이지를 사용하면 브라우저가 응고된다.
좋은 방법이 있는지 모색 중이다.