title: Mui-Datatables tableState in function causes infinite loop
body: <p>New to React... I am trying to set and save the Mui-Datatable tableState in a React Function. When I use the following code it I get the following error:</p>
  <p><em>Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate.</em></p>
  <p>How can I fix my code so this doesn't happen? I converted it from a Class to a Function so I could use a hook.</p>
  <pre><code>import React, {useEffect, useState} from 'react';
  import MUIDataTable from &quot;mui-datatables&quot;;
  import { MuiThemeProvider } from '@material-ui/core/styles';
  import { Typography, Box } from '@material-ui/core';
  import MuiDataTableCSS from '../../Styles/MuiDataTable';
  import Button from '@material-ui/core/Button';
  
  export default function ProposalTable() {
  const [isLoading, setIsLoading] = useState(false);
  const [cols, setCols] = useState([]);
  const [users, setUsers] = useState([]);
  const [currTable, setCurrTable] = useState({});
  
  const options = {
      filterType: 'multiselect',
      responsive: 'standard',
      fixedHeader: true,
      elevation: 1,
      selectableRows: false,
      tableBodyHeight: 'calc(100vh - 200px)',
      print: false,
      resizableColumns: false,
      draggableColumns: {
        enabled: true,
      },
      onTableInit: handleTableInit, 
      onTableChange: handleTableChange,
  };
  
  function handleTableInit(action, tableState){
      console.log('handleTableInit: ', tableState);
      setCurrTable({ tableState });
  }; 
  function handleTableChange(action, tableState){
      setCurrTable({ tableState });
      console.log('handleTableChange: ', tableState);
  };
  
  useEffect(() =&gt; {
      let cols = [];
      setIsLoading(true); // start the loader
      fetch(&quot;/data.json&quot;)
      .then(response =&gt; response.json())
      .then(data =&gt; {
          setIsLoading(false); // stop the loader
          for(var key in data[0]){
              var newKey = key.replace(/_/g, &quot; &quot;);
              cols = [...cols, { name: newKey, label: key}]
          }
          setUsers(data);
          setCols(cols);
      })
      .catch(error =&gt; {
          console.log(error);
      })
    .finally(() =&gt; {
        setIsLoading(false); // stop the loader
    });
    }, []);
  
  if (isLoading) {
      return &lt;p&gt;Loading...&lt;/p&gt;;
  }
  
  return (
      &lt;div id=&quot;muiDataTable&quot;&gt;
          &lt;Typography component=&quot;h1&quot; variant=&quot;h4&quot; align=&quot;center&quot;&gt;
              &lt;Box pb=&quot;1em&quot;&gt;
                  Proposals
              &lt;/Box&gt;
              &lt;Button style={{ textTransform: 'none' }} onClick={() =&gt; handleTableChange('button', currTable)}&gt;Save Table&lt;/Button&gt;
          &lt;/Typography&gt;
          &lt;MuiThemeProvider theme={MuiDataTableCSS}&gt;
              &lt;MUIDataTable
                  data={users}
                  columns={cols}
                  options={options}/&gt;
          &lt;/MuiThemeProvider&gt;
      &lt;/div&gt;
  )
  }
  </code></pre>
  <p>Mui-Datatable Example that uses Class: <a href="https://codesandbox.io/s/github/gregnb/mui-datatables?file=/examples/on-table-init/index.js" rel="nofollow noreferrer">https://codesandbox.io/s/github/gregnb/mui-datatables?file=/examples/on-table-init/index.js</a></p>
  <p>Mui-Datatable Example Code:</p>
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import MUIDataTable from '../../src';
  
  class Example extends React.Component {
  constructor(props) {
  super(props);
  
  this.state = {
    table: {}
  };
  this.handleTableInit = this.handleTableInit.bind(this);
  this.handleTableChange = this.handleTableChange.bind(this);
  }
  
  /** onTableInit gives access to initial MuiDataTable state
     *  if the application needs access to internal state prior to
     *  the user performing a table mutation (sort, filter, etc.)
     *  that triggers onTableChange
   */
  handleTableInit = (action, tableState) =&gt; {
  console.log('handleTableInit: ', tableState);
  this.setState({ table: tableState });
  };
  
  handleTableChange = (action, tableState) =&gt; {
    console.log('handleTableChange: ', tableState);
    this.setState({ table: tableState });
  };
  
  columns = ['Name', 'Title', 'Location', 'Age', 'Salary'];
  
  data = [
    ['Eli Mejia', 'Commercial Specialist', 'Long Beach', 65, 400000],
    ['Gene Leblanc', 'Industrial Analyst', 'Hartford', 34, 110000],
    ['Danny Leon', 'Computer Scientist', 'Newark', 60, 220000],
    ['Lane Lee', 'Corporate Counselor', 'Cincinnati', 52, 180000],
    ['Jesse Hall', 'Business Analyst', 'Baltimore', 44, 99000],
    ['Danni Hudson', 'Agency Legal Counsel', 'Tampa', 37, 90000],
    ['Terry Macdonald', 'Commercial Specialist', 'Miami', 39, 140000],
    ['Justice Mccarthy', 'Attorney', 'Tucson', 26, 330000],
    ['Silver Carey', 'Computer Scientist', 'Memphis', 47, 250000],
    ['Franky Miles', 'Industrial Analyst', 'Buffalo', 49, 190000],
    ['Glen Nixon', 'Corporate Counselor', 'Arlington', 44, 80000],
    ['Gabby Strickland', 'Business Process Consultant', 'Scottsdale', 26, 45000],
    ['Mason Ray', 'Computer Scientist', 'San Francisco', 39, 142000],
  ];
  
  options = {
    filter: true,
    selectableRows: 'multiple',
    filterType: 'dropdown',
    responsive: 'standard',
    rowsPerPage: 10,
    download: false, // hide csv download option
    onTableInit: this.handleTableInit,
    onTableChange: this.handleTableChange,
  };
  
  render() {
    return &lt;MUIDataTable title={'ACME Employee list'} data={this.data} columns={this.columns} options={this.options} /&gt;;
    }
  }
  
  export default Example;
  </code></pre>