title: React Material table editing using hooks
body: <p>I am trying to edit/delete a row in material table using react hooks. although I can see that the state is being modified, it does not re-render the material table. the useeffect is not firing after the setdata.</p>
  
  <pre><code>import React, { useState, useEffect } from "react";
  import faker from "faker";
  import MaterialTable from "material-table";
  import * as _ from "lodash";
  
  let testData = [];
  
  for (var i = 0; i &lt; 100; i++) {
      testData.push({
          _id: i,
          fullName: faker.name.findName(),
          "email.address": faker.internet.email(),
          phone_number: faker.phone.phoneNumber(),
          address: {
              city: faker.address.city(),
              state: faker.address.state(),
              country: faker.address.country()
          }
      });
  }
  
  let columndata = [
      { title: "Id", field: "_id" },
      { title: "Name", field: "fullName" },
      { title: "Email", field: "email.address" },
      { title: "Phone", field: "phone_number" },
      { title: "City", field: "address.city" },
      { title: "State", field: "address.state" },
      { title: "Country", field: "address.country" }
  ];
  
  const MyDataGrid = () =&gt; {
      let [data, setData] = useState(testData);
  
      useEffect(() =&gt; {
          debugger;
          if (data.length &lt; 100) {
              console.log(data.length);
          }
      }, [data]);
  
      return (
          &lt;MaterialTable
              columns={columndata}
              data={data}
              title="test-table"
              options={{
                  filtering: true,
                  sorting: true,
                  exportButton: true,
                  grouping: true
              }}
              editable={{
                  onRowDelete: oldData =&gt;
                      new Promise((resolve, reject) =&gt; {
                          setTimeout(() =&gt; {
                              let newData = data;
                              _.remove(newData, { _id: oldData._id });
                              debugger;
                              setData(newData);
                              resolve();
                          }, 1000);
                      })
              }}
          /&gt;
          // &lt;button onClick={() =&gt; setData(_.remove(data, row =&gt; row._id !== 3))}&gt;
          //     Click me
          // &lt;/button&gt;
      );
  };
  
  export default MyDataGrid;
  </code></pre>
  
  <p>The above code renders fine initially. However when I try to delete the row, the data has removed one row, but the useEffect does not fire and the MaterialTable component is not rendered with the new data. If I use the commented out code, though, the useEffect fires fine after the delete. What am I missing?</p>