Table causing too many re-renders, React

Question

I am trying to get this table to populate on my inspection page--but I am getting an error that states too many re-renders, I tried moving the component to a different component. I removed the useEffect from it, but I am still getting that error. I know it's definitely something in my InspectionSearch, as as soon as I render it, that's when it throws the error. Any help would be greatly appreciated.

import { useState, React } from "react";
import { useTable } from 'react-table'
import 'bootstrap/dist/css/bootstrap.min.css';


const SearchInspections = ({inspections}) => {

    const [chartData, setChartData] = useState([]);

   
        let inspectionData = inspections.map(inspection => {
            return [
                inspection.inspection_date,
                inspection.eggs,
                inspection.larvae,
                inspection.sealed_brood,
                inspection.covered_bees,
                inspection.nectar_honey,
                inspection.pollen,
            ]
        });
        setChartData(inspectionData);
  

    const columns = [
        {
            Header: 'Frames',
            columns: [
                {
                    Header: 'W/Eggs',
                    accessor: 'eggs',
                },
                {
                    Header: 'W/Larvae',
                    accessor: 'larvae',
                },
                {
                    Header: 'W/Sealed Brood',
                    accessor: 'sealed_brood',
                },
                {
                    Header: 'Covered in Bees',
                    accessor: 'covered_bees',
                },
                {
                    Header: 'W/Nectar and/or Honey',
                    accessor: 'nectar_honey',
                },
                {
                    Header: 'W/Pollen',
                    accessor: 'pollen',
                },
                {
                    Header: 'Pest Spotted',
                    accessor: 'pest_spotted',
                },
                {
                    Header: 'Pest Action',
                    accessor: 'pest_action',
                },
                {
                    Header: 'Notes or Concerns',
                    accessor: 'notes_concerns',
                },
                {
                    Header: 'Inspection Date',
                    accessor: 'inspection_date',
                },
            ],
        },
       
    ];


    const data = [
        ...chartData
    ]
    
    const {
        getTableProps,
        getTableBodyProps,
        headerGroups,
        rows,
        prepareRow,
    } = useTable({
        columns,
        data,
    })
    
    return (<>
                    <table className="table" {...getTableProps()}>
            <thead>
                {headerGroups.map(headerGroup => (
                    <tr {...headerGroup.getHeaderGroupProps()}>
                        {headerGroup.headers.map(column => (
                            <th {...column.getHeaderProps()}>{column.render('Header')}</th>
                        ))}
                    </tr>
                ))}
            </thead>
            <tbody {...getTableBodyProps()}>
                {rows.map((row, i) => {
                    prepareRow(row)
                    return (
                        <tr {...row.getRowProps()}>
                            {row.cells.map(cell => {
                                return <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
                            })}
                        </tr>
                    )
                })}
            </tbody>
        </table>
    

    </>);
}

export default SearchInspections;

Here is where it's rendering

import { React, useState, useEffect } from "react";
import { useParams } from "react-router-dom";
import axios from "axios";
import useAuth from "../../hooks/useAuth";
import DisplayInspections from "../../components/DisplayInspections/DisplayInspections";
import InspectionTracker from "../../components/InspectionTracker/InspectionTracker";
import SearchInspections from "../../components/InspectionSearch/InspectionSearch"

const InspectionPage = (props) => {
  const [user, token] = useAuth();
  const [inspections, setInspections] = useState([]);
  const { id } = useParams();

  useEffect(() => {
    fetchInspections();
  }, [token]);

  const fetchInspections = async () => {
    try {
      let response = await axios.get(
        `http://127.0.0.1:8000/api/inspections/all/${id}`,
        {
          headers: {
            Authorization: "Bearer " + token,
          },
        }
      );
      setInspections(response.data);
    } catch (error) {
      console.log(error.response.data);
    }
  };



  return (
    <div className="container">
      <InspectionTracker inspections={inspections} />
      <DisplayInspections
        inspections={inspections}
        setSelectedHive={props.setSelectedHive}
        setSelectedInspection={props.setSelectedInspection}
      />
      <SearchInspections inspections={inspections} />
    </div>
  );
};

export default InspectionPage;

Answer 1

I was able to get an instructor to help me out. Data Format was return as an array, it should have been formatted to the table see updated and working code in case anyone wants to try their hand at using react-tables!

import { useEffect, useState } from "react";
import React from "react";
import { useTable } from "react-table";
import "bootstrap/dist/css/bootstrap.min.css";

const SearchInspections = ({ inspections }) => {
  const [chartData, setChartData] = useState([]);
  
  useEffect(() => {
    const inspectionData = inspections.map((inspection) => {
      
        return{
            "eggs": inspection.eggs,
            "larvae": inspection.larvae,
            "sealed_brood": inspection.sealed_brood,
            "covered_bees": inspection.covered_bees,
            "nectar_honey": inspection.nectar_honey,
            "pollen": inspection.pollen,
            "pest_spotted": inspection.pest_spotted,
            "pest_action": inspection.pest_action,
            "notes_concerns": inspection.notes_concerns,
            "inspection_date": inspection.inspection_date,
        };
    });
    setChartData(inspectionData);
  }, [inspections]);

  const columns = React.useMemo(
      () =>[
    {
      Header: "Frames",
      columns: [
        {
          Header: "W/Eggs",
          accessor: "eggs",
        },
        {
          Header: "W/Larvae",
          accessor: "larvae",
        },
        {
          Header: "W/Sealed Brood",
          accessor: "sealed_brood",
        },
        {
          Header: "Covered in Bees",
          accessor: "covered_bees",
        },
        {
          Header: "W/Nectar and/or Honey",
          accessor: "nectar_honey",
        },
        {
          Header: "W/Pollen",
          accessor: "pollen",
        },
        {
          Header: "Pest Spotted",
          accessor: "pest_spotted",
        },
        {
          Header: "Pest Action",
          accessor: "pest_action",
        },
        {
          Header: "Notes or Concerns",
          accessor: "notes_concerns",
        },
        {
          Header: "Inspection Date",
          accessor: "inspection_date",
        },
      ],
    },
  ], []);

  const data = React.useMemo(() => {
    return  [...chartData]
    }, [chartData]);



    const Table = ({ columns, data }) => {
        // Use the state and functions returned from useTable to build your UI
        const {
          getTableProps,
          getTableBodyProps,
          headerGroups,
          rows,
          prepareRow,
        } = useTable({
          columns,
          data,
        })

        return(
            <table className="table" {...getTableProps()}>
            <thead>
              {headerGroups.map((headerGroup) => (
                <tr {...headerGroup.getHeaderGroupProps()}>
                  {headerGroup.headers.map((column) => (
                    <th {...column.getHeaderProps()}>{column.render("Header")}</th>
                  ))}
                </tr>
              ))}
            </thead>
            <tbody {...getTableBodyProps()}>
              {rows.map((row) => {
                prepareRow(row);
                return (
                  <tr {...row.getRowProps()}>
                    {row.cells.map((cell) => {
                      return (
                        <td {...cell.getCellProps()}>{cell.render("Cell")}</td>
                      );
                    })}
                  </tr>
                );
              })}
            </tbody>
          </table>
        )
    }

  return (
    <>
      <Table columns={columns} data={data}></Table>
      {console.log(columns)}
      {console.log(data)}
    </>
  );
};

export default SearchInspections;

Answer 2

Put your logic inside an update useEffect

const SearchInspections = ({inspections}) => {

   const [chartData, setChartData] = useState([]);

   useEffect(() => {
    let inspectionData = inspections.map(inspection => {
        return [
            inspection.inspection_date,
            inspection.eggs,
            inspection.larvae,
            inspection.sealed_brood,
            inspection.covered_bees,
            inspection.nectar_honey,
            inspection.pollen,
        ]
    });
    setChartData(inspectionData);
  }, [inspections])

   const columns = [
   /** end of your code */