title: onClick in button element not triggering re-render in react-table when using react hooks with graphql
body: <p>I'm trying to render a table using react-table, however, this table has different states that are being pulled from a GraphQL database. Each button should effectively render the same UI for the table, but only display the shipments that have the correct status associated with what button the user clicked.</p>
  
  <p>My shipments query is as follows:</p>
  
  <pre><code>import { gql } from 'apollo-boost';
  
  export const GET_SHIPMENTS = gql`
        {
          shipments {
            created_at
            id
            status
            orders {
              order_items
            }
          }
        }
      `;
  </code></pre>
  
  <p>My table component using the <code>GET_SHIPMENTS</code> query looks like this: </p>
  
  <pre><code>import React, { useState } from "react";
  import { graphql } from 'react-apollo';
  import { GET_SHIPMENTS } from '../graphql/ShipmentQueries';
  import ReactTable from 'react-table';
  
  import {
    Card,
    CardBody,
    Row,
    ButtonGroup,
    Button
  } from "reactstrap";
  
  function OrderTable ({ loading, shipments }) {
    const [shownShipment, setShownShipment] = useState({status: "created"});
  
    const columns = [
      {
        Header: 'ID',
        accessor: 'id',
      },
      {
        Header: 'Status',
        accessor: 'status',
      },
      {
        Header: 'Item Count',
        accessor: 'orders[0].order_items'
      },
      {
        Header: 'Time Stamp',
        accessor: 'created_at',
      },
    ];
  
  if (loading) return &lt;p&gt;Loading...&lt;/p&gt;;
      return (
          &lt;div className="content"&gt;
              &lt;ButtonGroup className="center"&gt;
                  &lt;Button 
                    name="created" 
                    onClick={() =&gt; setShownShipment(shownShipment.status === "created")}
                  &gt;
                    Created
                  &lt;/Button&gt;
  
                  &lt;Button 
                    name="awaiting driver" 
                    onClick={() =&gt; setShownShipment(shownShipment.status === "awaiting_driver")}
                  &gt;
                    Awaiting Driver
                  &lt;/Button&gt;
  
                  &lt;Button 
                    name="delivered" 
                    onClick={() =&gt; setShownShipment(shownShipment.status === "delivered")}
                  &gt;
                    Delivered
                  &lt;/Button&gt;
              &lt;/ButtonGroup&gt;
            &lt;Row className="mt-5"&gt;
                &lt;Card&gt;
                  &lt;CardBody&gt;
                    &lt;ReactTable
                      data={shipments}
                      columns={columns}
                      sortable={true}
                      resizable={false}
                      minRows={10}
                    /&gt;
                  &lt;/CardBody&gt;
                &lt;/Card&gt;
            &lt;/Row&gt;
          &lt;/div&gt;
      );
    }
  
    export const OrderTableWithData = graphql(GET_SHIPMENTS, {
      props: ({data: { loading, shipments, shownShipments }}) =&gt; ({
        loading,
        shipments,
        shownShipments,
      }),
    })(OrderTable);
  </code></pre>
  
  <p>This is my first introduction into using hooks, so I know that I'm probably not utilizing them properly. I'm not sure if I have to use the <code>useEffect</code> hook or not. I've scoured the Hooks docs and can't seem to find a clear answer. I feel like <code>useState</code> should work. Do I have to re-render the entire ReactTable element?</p>