SO i have useEffect in my page to render data with limit from data grid, i try to update the data in the hook component, at first it works fine and when i try to console it the data only update when i change the pagination or the page limit, but then i notice that when i update the hook component inside the useEffect, it runs almost non stop.... here is my code:

import { Box, useTheme } from "@mui/material";
import { DataGrid } from "@mui/x-data-grid";
import dataService from "../../services/data.service";
import React, { useState, useEffect } from "react";

import DataGridCustomToolbar from "../../components/DataGridCustomToolbar";
import { usePostBomListMutation } from "../../services/data.service";
import CustomColumnMenu from "../../components/CustomColumnMenu";

const BOM = () => {
  const theme = useTheme();
  // values to be sent to the backend
  const [page, setPage] = useState(0);
  const [limit, setlimit] = useState(100);
  const [order, setOrder] = useState([
    {
      column: "1",
      dir: "asc",
    },
  ]);
  const [search, setSearch] = useState({
    value: "",
  });
  const [dummyData, setDummyData] = useState([]);
  useEffect(() => {
    const datas = dataService
      .getBomList(page, limit, order, search)
      .then((response) => {
        console.log("BOM");
        return response.data.data.data;
      });
  });
  console.log(dummyData);
  const [searchInput, setSearchInput] = useState("");
  // const { data, isLoading, error } = usePostBomListMutation({
  //   page: page,
  //   limit: limit,
  //   order: JSON.stringify(order),
  //   search: JSON.stringify(search),
  // });

  // const { data } = useDemoData({
  //   dataSet: "Commodity",
  //   rowLength: 100000,
  //   ditable: true,
  // });
  const columns = [
    // {
    //   field: "id",
    //   headerName: "ID",
    //   width: 150,
    // },
    {
      field: "sku",
      headerName: "SKU",
      width: 100,
    },
    { field: "sku_name", headerName: "SKU NAME", width: 300 },
    {
      field: "plant",
      headerName: "Plant",
      width: 80,
      align: "center",
      headerAlign: "center",
    },
    { field: "base_qty", headerName: "Base QTY", width: 100 },
    {
      field: "item",
      headerName: "Item",
      width: 60,
      align: "center",
      headerAlign: "center",
    },
    { field: "uom_sku", headerName: "UOM SKU", width: 100, align: "center" },
    { field: "material", headerName: "Material", width: 150 },
    { field: "material_name", headerName: "Material Name", width: 300 },
    { field: "qty_material", headerName: "Material QTY", width: 100 },
    { field: "uom_material", headerName: "Material UOM", width: 100 },
    { field: "alt_bom", headerName: "BOM ALT", width: 80 },
    { field: "valid_from", headerName: "Valid From", width: 210 },
    { field: "valid_to", headerName: "Valid to", width: 210 },
    { field: "status", headerName: "Status", width: 80 },
  ];
return (
    <Box m="5px">
      <Box
        height="80vh"
        sx={{
          "& .MuiDataGrid-root": {
            border: "none",
          },
          "& .MuiDataGrid-cell": {
            borderBottom: "none",
          },
          "& .MuiDataGrid-columnHeaders": {
            backgroundColor: theme.palette.background.alt,
            color: theme.palette.secondary[100],
            borderBottom: "none",
          },
          "& .MuiDataGrid-virtualScroller": {
            backgroundColor: theme.palette.primary.light,
          },
          "& .MuiDataGrid-footerContainer": {
            backgroundColor: theme.palette.background.alt,
            color: theme.palette.secondary[100],
            borderTop: "none",
          },
          "& .MuiDataGrid-toolbarContainer .MuiButton-text": {
            color: `${theme.palette.secondary[200]} !important`,
          },
        }}
      >
        {console.log(data.length)}
        <DataGrid
          // loading={isLoading || !data}
          getRowId={(row) => row.id}
          columns={columns}
          rowCount={(data && data.length) || 0}
          rowsPerPageOptions={[20, 50, 100]}
          rows={data || []}
          pagination
          paginationMode="server"
          sortingMode="server"
          page={page}
          pageSize={limit}
          onPageSizeChange={(newPageSize) => setlimit(newPageSize)}
          onPageChange={(newPage) => setPage(newPage)}
          onSortModelChange={(newSortModel) => setOrder(...newSortModel)}
          components={{ Toolbar: DataGridCustomToolbar }}
          componentsProps={{
            toolbar: { searchInput, setSearchInput, setSearch },
          }}
        />
      </Box>
    </Box>
  );
};
export default BOM;

Can someone help me where did i do wrong here...

CodePudding user response：

useEffect(() => {
    const datas = dataService
      .getBomList(page, limit, order, search)
      .then((response) => {
        console.log("BOM");
        return response.data.data.data;
      });
 }, [page, limit, order, search]);

You can put dynamic variables in dependency that you need to watch while changing