title: React Table w/JSON API hooks?
body: <p>So I started learning to use React Table (<a href="https://github.com/tannerlinsley/react-table" rel="nofollow noreferrer">https://github.com/tannerlinsley/react-table</a>) it's pretty nifty. However I am an intermediate at React (I understand the basic lifecycle/props/etc..) but hooks are rather new to me.</p>
  
  <p>I decided to use it in a personal project which was mostly classes. It calls an API (that I wrote in Rails) to return some basic JSON information. I am using axios (<a href="https://github.com/axios/axios" rel="nofollow noreferrer">https://github.com/axios/axios</a>) to call the API.</p>
  
  <p>From learning react hooks I converted what was originally my <code>componentDidMount()</code> call into a <code>useEffect()</code> call. Below is the code for the Table and the Table Container (it is for an application that deals with sensors hence the names)</p>
  
  <p><strong>Sensor Container:</strong></p>
  
  <pre><code>import React, { useState, useEffect } from "react";
  import axios from "axios";
  import SensorCard from "./SensorCard";
  import SensorTable from "./SensorTable";
  import "../Styles/Components/_SensorContainer.css";
  
  function SensorContainer() {
    const [sensors, setSensors] = useState([]);
    const [data, setData] = useState([])
  
    useEffect(() =&gt; {
      // GET sensor list from API
      axios
      .get("http://localhost:3000/api/v1/devices.json")
      .then((response) =&gt; {
        // handle success
        console.log(response);
        setSensors(response.data.data)
      })
      .then(() =&gt; {
        console.log(sensors)
        console.log(sensors[0].attributes)
        console.log(name)
        console.log(serialNumber)
        console.log(deviceStatus)
        const { name, 'serial-number':serialNumber, 'device-status':deviceStatus} = sensors[0].attributes
        const data = sensors.map(sensor =&gt; 
          ({ 
            id: sensor.id, 
            name: name, 
            serialNum: serialNumber,
            status: deviceStatus
          })
        )
      setData(data)
      })
      .catch((error) =&gt; {
        console.log(error);
      })
    }, [sensors.length]);
  
  
  
  
  
    // const data = React.useMemo(
    //   () =&gt; [
    //     {
    //       id: '1',
    //       name: 'TEMP001',
    //       serialNum: 'Temp Sensor',
    //       status: 'Active',
    //     },
    //     {
    //       id: '2',
    //       name: 'TEMP002',
    //       serialNum: 'Temp Sensor',
    //       status: 'Unknown',
    //     },
    //     {
    //       id: '3',
    //       name: 'HUM001',
    //       serialNum: 'Humidity Sensor',
    //       status: 'Active',
    //     },
    //   ],
    //   []
    // )
  
    const columns = React.useMemo(
      () =&gt; [
        {
          Header: 'ID',
          accessor: 'id', // accessor is the "key" in the data
        },
        {
          Header: 'Name',
          accessor: 'name',
        },
        {
          Header: 'Serial Number',
          accessor: 'serialNum',
        },
        {
          Header: 'Status',
          accessor: 'status',
        },
      ],
      []
    )
    return (
      &lt;div&gt;
        &lt;SensorTable columns={columns} data={data} /&gt;
      &lt;/div&gt;
    )
  }
  
  export default SensorContainer;
  </code></pre>
  
  <p><strong>Sensor Table:</strong></p>
  
  <pre><code>import React from "react";
  import {
    useTable,
    useGroupBy,
    useFilters,
    useSortBy,
    useExpanded,
    usePagination,
  } from "react-table";
  import "../Styles/Components/_SensorTable.css";
  
  function SensorTable({ columns, data }) {
    const {
      getTableProps,
      getTableBodyProps,
      headerGroups,
      rows,
      prepareRow,
    } = useTable({ columns, data })
  
    // Render the UI for your table
    return (
      &lt;table {...getTableProps()} style={{ border: 'solid 1px blue' }}&gt;
        &lt;thead&gt;
          {headerGroups.map(headerGroup =&gt; (
            &lt;tr {...headerGroup.getHeaderGroupProps()}&gt;
              {headerGroup.headers.map(column =&gt; (
                &lt;th
                  {...column.getHeaderProps()}
                  style={{
                    borderBottom: 'solid 3px red',
                    background: 'aliceblue',
                    color: 'black',
                    fontWeight: 'bold',
                  }}
                &gt;
                  {column.render('Header')}
                &lt;/th&gt;
              ))}
            &lt;/tr&gt;
          ))}
        &lt;/thead&gt;
        &lt;tbody {...getTableBodyProps()}&gt;
          {rows.map(row =&gt; {
            prepareRow(row)
            return (
              &lt;tr {...row.getRowProps()}&gt;
                {row.cells.map(cell =&gt; {
                  return (
                    &lt;td
                      {...cell.getCellProps()}
                      style={{
                        padding: '10px',
                        border: 'solid 1px gray',
                        background: 'papayawhip',
                      }}
                    &gt;
                      {cell.render('Cell')}
                    &lt;/td&gt;
                  )
                })}
              &lt;/tr&gt;
            )
          })}
        &lt;/tbody&gt;
      &lt;/table&gt;
    )
  }
  
  export default SensorTable;
  </code></pre>
  
  <p>So I am running into a few "design issues" regarding this:</p>
  
  <ol>
  <li>How/Where do people normally set/store the column data and "data"
  data when using react table. I'd assume just a <code>const</code> for the
  columns....but where is the data stored? (I'd normally store it in
  state in a class, but since im trying to use hooks I am unsure)</li>
  <li>I feel like my <code>useEffect()</code> is wrong for fetching API data. I also ran into a bug where it constantly kept running. I saw someone suggest to check the length to prevent this....but this feels hacky. What's the correct way to do this?</li>
  <li>I can't quite figure out how to map the data how I want to with <code>React.useMemo</code> I can't find any examples either (Apparently react table requires this). Any Advice?</li>
  </ol>
  
  <p>I am just really unsure how to set this up properly. I can't seem to find any examples of people using react table WITH json api fetching either.</p>