When trying to send the selected rows of a Material-UI data-grid ponent to a React Hook, the site locks up with the following error:

Warning: Maximum update depth exceeded. This can happen when a ponent calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.

I may be going about it the wrong way, but what I'm hoping to do is pass the data of the currently selected rows into a React Hook so that I can action it.

import React, { useState } from "react";
import { DataGrid } from "@material-ui/data-grid";

const IndexPage = () => {
  const [test, setTest] = useState([]);

  function currentlySelected(selections) {
    setTest(selections);
    console.log(test);
  }

  const rows = [
    { id: 1, name: "Example 1", price: "$10.99" },
    { id: 2, name: "Example 2", price: "$12.50" }
  ];

  const columns = [
    { field: "name", headerName: "Name", width: 300 },
    { field: "price", headerName: "Price" }
  ];

  const sortModel = [
    {
      field: "name",
      sort: "asc"
    }
  ];

  return (
    <>
      <div style={{ height: "50vh" }}>
        <DataGrid
          sortingOrder={["desc", "asc"]}
          sortModel={sortModel}
          rows={rows}
          columns={columns}
          pageSize={100}
          rowHeight={38}
          checkboxSelection
          onSelectionChange={newSelection => {
            console.log(newSelection.rows)

            // **** The following line breaks the page upon selection **** 
            // currentlySelected(newSelection)
          }}
        />
      </div>
    </>
  );
};

export default IndexPage;

Inside of the DataGrid you'll notice an onSelectionChange property with some mented out code. Unmenting that line, allowing for the onSelectionChange to update the test React Hook is what causes the page to break.

What is the proper way of pushing the currently selected fields up to a hook?

Code Sandbox Example Link.

When trying to send the selected rows of a Material-UI data-grid ponent to a React Hook, the site locks up with the following error:

Warning: Maximum update depth exceeded. This can happen when a ponent calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.

I may be going about it the wrong way, but what I'm hoping to do is pass the data of the currently selected rows into a React Hook so that I can action it.

import React, { useState } from "react";
import { DataGrid } from "@material-ui/data-grid";

const IndexPage = () => {
  const [test, setTest] = useState([]);

  function currentlySelected(selections) {
    setTest(selections);
    console.log(test);
  }

  const rows = [
    { id: 1, name: "Example 1", price: "$10.99" },
    { id: 2, name: "Example 2", price: "$12.50" }
  ];

  const columns = [
    { field: "name", headerName: "Name", width: 300 },
    { field: "price", headerName: "Price" }
  ];

  const sortModel = [
    {
      field: "name",
      sort: "asc"
    }
  ];

  return (
    <>
      <div style={{ height: "50vh" }}>
        <DataGrid
          sortingOrder={["desc", "asc"]}
          sortModel={sortModel}
          rows={rows}
          columns={columns}
          pageSize={100}
          rowHeight={38}
          checkboxSelection
          onSelectionChange={newSelection => {
            console.log(newSelection.rows)

            // **** The following line breaks the page upon selection **** 
            // currentlySelected(newSelection)
          }}
        />
      </div>
    </>
  );
};

export default IndexPage;

Inside of the DataGrid you'll notice an onSelectionChange property with some mented out code. Unmenting that line, allowing for the onSelectionChange to update the test React Hook is what causes the page to break.

What is the proper way of pushing the currently selected fields up to a hook?

Code Sandbox Example Link.

• javascript
• reactjs
• material-ui

1 Answer 1

What is happening is when you render DataGrid it is most firing onSelectionChange. From there, you are setting your state which re-renders the grid, which calls onSelectionChange... and you are into an infinite loop.

You can fix this by either:

1. Only calling setTest if selections passed by onSelectionChange does not equal what you have in state already.

const IndexPage = () => {
  const [test, setTest] = useState([]);

  function currentlySelected(selections) {
    if (test !== selections) { // I didn't write it in but you'll need to do object parison here
      setTest(selections)
    }
  }

 ...

  return (
    <div style={{ height: "50vh" }}>
      <DataGrid
        onSelectionChange={currentlySelected}
      />
    </div> 
  )
}

2. Store the selected row in a ref

const IndexPage = () => {
  const test= useRef({});

  function currentlySelected(selections) {
    test.current = selections;
  }

 ...

  return (
    <div style={{ height: "50vh" }}>
      <DataGrid
        onSelectionChange={currentlySelected}
      />
    </div> 
  )
}

Option 2 may or may not make sense depending on what you want to do with the selected rows, but either of these should stop your page from locking up