Getting Maximum Update Depth Exceeded with useTable

[st11x]

Hi,

I am running into much difficulties trying to understand how the useTable hook is running into a recursive loop. I created a very small example in this snippet of code below. In the useMemo for the data item, passing foo or fooArr as the dependency results in the "maximum update depth exceeded" loop.

If I pass in an empty array, it works. So is the variable num. However, if num is changed by clicking on the div, the "IN" message is never printed.

Does a primitive like num require useState? The real use case is to put the length of the array returned by useSWR as the dependency. Putting the resulting data array as the dependency results in the loop.

I made a similar example with just useMemo and that wasn't the problem, though num didn't work as well.

This is react-table v7.7.0.

Thanks
Matt

import { useMemo } from "react";
import { useTable, useSortBy } from "react-table";

export default function Page(props) {
    const foo = {
        bar: 1,
    };

    const fooArr = [1]
    let num = 1

    function update(){
        num++
        console.log(num)
    }

    const headers = [{ Header: "id", accessor: "id" }];

    const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = useTable(
        {
            columns: useMemo(() => headers, []),
            data: useMemo(() =>  { console.log("IN"); return [{ id: "1" }]}, [fooArr]),
        },
        useSortBy
    );
    return <div onClick={update}>done</div>;
}

[Mihai-github]

+1