title: UseEffect with React-Table not displaying changes unless the page is refreshed
body: <p>I am a Java developer trying to learn React and I have this issue where I updated a table to use <a href="https://github.com/tannerlinsley/react-table" rel="nofollow noreferrer">react-table</a> and now, whenever I either add or delete an item from my api response, I need to refresh the whole page to see the changes take place, whereas before I had my useEffect showing these changes immediately.</p>
  <p>Below I have my complete piece of code after deleting pretty much everything else trying to find the root cause for this issue. If I use the commented out tbody instead of the one that uses react-table, I can still see my updates working fine and as expected.</p>
  <p>It may be worth mentioning also that if I try to use <code>setData</code> inside of the useEffect piece the react-table won't even get populated.</p>
  <pre><code>const {useTable} = require('react-table')
  
  const MainTable = ({dataTableObj}) =&gt; {
  
  const [reports, setReports] = useState(dataTableObj.reports)
  
  const getInitialData = () =&gt; reports.map(report =&gt; ({
      name: report.title,
      runDate: report.runDate,
      createdDate: report.createdDate,
      category: report.category.title,
      actions: report.id,
  }));
  
  const [data, setData] = useState(getInitialData)
  
  const {
      getTableProps,
      getTableBodyProps,
      rows,
      prepareRow,
  } = useTable(
      {
          columns,
          data,
      }
  );
  
  useEffect(() =&gt; {
  
      setReports(dataTableObj.reports)
      // setData(dataTableObj.reports)
  
  }, [dataTableObj.reports]);
  
  const onConfirmDelete = (id) =&gt; {
  
      deleteReport(id).then(() =&gt; {
  
          const del = reports.filter(report =&gt; id !== report.id)
          setReports(del)
  
      })
  }
  
  return (
      &lt;div&gt;
          &lt;table {...getTableProps()}&gt;
              &lt;tbody {...getTableBodyProps()}&gt;
              {rows.map((row, i) =&gt; {
                  prepareRow(row)
                  return (
                      &lt;tr {...row.getRowProps()}&gt;
                          &lt;td&gt;{row.original.name}&lt;/td&gt;
                          &lt;td&gt;
                              &lt;IconButton onClick={() =&gt; onConfirmDelete(row.original.actions)}&gt;
                                  &lt;Delete/&gt;
                              &lt;/IconButton&gt;
                          &lt;/td&gt;
                      &lt;/tr&gt;
                  )
              })}
              &lt;/tbody&gt;
              {/*&lt;tbody&gt;*/}
              {/*{reports.map((item) =&gt; {*/}
              {/*    return [*/}
              {/*        &lt;tr key={item.id}&gt;*/}
              {/*            &lt;td&gt;{item.title}&lt;/td&gt;*/}
              {/*            &lt;td&gt;*/}
              {/*                &lt;IconButton onClick={() =&gt; onConfirmDelete(item.id)}&gt;*/}
              {/*                    &lt;Delete/&gt;*/}
              {/*                &lt;/IconButton&gt;*/}
              {/*            &lt;/td&gt;*/}
              {/*        &lt;/tr&gt;*/}
              {/*    ];*/}
              {/*})}*/}
              {/*&lt;/tbody&gt;*/}
          &lt;/table&gt;
      &lt;/div&gt;
      )
  }
  
  export default MainTable
  </code></pre>
  <p>I think I've run out of ideas at this point on what I could be missing and may need some help or guidance please.</p>
  <p>Thank you very much.</p>