Mui-Datatable onTableChange is not working when adding a setState

Question

I am using mui-datatable and based on the official example of this codesandbox, you can setState on the tableState. https://codesandbox.io/s/trusting-jackson-k6t7ot?file=/examples/on-table-init/index.js

handleTableInit = (action, tableState) => {
    console.log("handleTableInit: ", tableState);
    this.setState({ table: tableState });
  };

  handleTableChange = (action, tableState) => {
    console.log("handleTableChange: ", tableState);
    this.setState({ table: tableState });
  };

I wanted to get the the tableState.displayData hence, I added this, however, this will result to an error that says:

Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

  const handleChange = (action, tableState) => {
    console.log(tableState.displayData);
    setDisplayedData(tableState.displayData);
  };

const options = {
    enableNestedDataAccess: ".",
    print: false,
    filterType: "multiselect",
    selectableRows: "none",
    downloadOptions: { filename: "Data.csv", separator: "," },
    expandableRows: true,
    onTableChange: handleChange,
    onTableInit: handleTableChange,

I wanted to store the data of the tableState.displayData to the setDisplayedData. How can I fix this error?

I recreated this error on codesandbox: https://codesandbox.io/s/mui-datatable-reports-mqrbb3?file=/src/App.js:4130-4415

Answer 1

This is keep rendering because you have used setDisplayedData in the handleChange function. so whenever table change you update the state and it again changing the state. So it is going to an infinite loop.

you should put condition to check if data you are getting is different from the prev one or not. you can try isEqualwith & isEqual functions from lodash library to check if you new data is different from old or not.

const handleChange = (action, tableState) => {
    console.log(tableState.displayData);
    if(!isEqualwith(displayedData, tableState.displayData, isEqual)) { 
         setDisplayedData([...tableState.displayData]);}
        };

Note: add lodash to you dependencies and import isEqualwith & isEqual functions.