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

Warning: Maximum update depth exceeded. This can happen when a component 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 commented out code. Uncommenting 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.