Trouble with useTable data input (error recreated in CodeSandbox)

[elaverack]

Hi all. I am trying to learn and understand how to use react-table. I followed the quick start guide and got the basic table to render correctly.
I then wanted to generate my own set of data with a function so I moved the data object to be the output of a function to make sure I had the output format correct but I keep running into an error originating from useTable. It only happens when I pass it data that is the output of a function, not when you pass data directly.

I was able to reproduce the error on CodeSandbox here

Any help would be appreciated.

[egertaia]

Hey @WheatiesTM

I've fixed your error here - you still need a function for the Table so you can actually render it.
https://codesandbox.io/s/zen-goldstine-45966?file=/src/App.js

I've also added useCallback to your method, so it won't trigger re-render. It is not needed currently as it is static array you are going to return, but I imagine you are going to need to get this data from API or redux state, thus useCallback is more than welcome.

Let me know if you have any questions - I'll try to help you out.

[elaverack]

Thank you for the help! The need for a function to render the table was not explicitly stated in the quick start guide (although maybe it was implied by the examples and I overlooked it).
I am still confused about the use of useMemo. Why do I have to write:
const data = React.useMemo(() => getData(), [getData]);
While the basic example code here uses:
const data = React.useMemo(() => makeData(20), [])
I thought useMemo only cared about function parameters in the dependency array.

Again thank you for the help!

Edit: I looked more carefully at your fix and I think it has to do with that the getData method isn't really a function but actually a constant that gets its value from calling the useCallback method which runs the data generating function. Because getData is a variable it needs to see it as a dependency?

[egertaia]

That is true. I've used usecallback because that's the real life use scenario. You have a redux store that you get data out of with useSelector.
Perhaps you need to do something to the data of api to make it table friendly, so you create your modifying func.

Modyfying func is usecallback with data as dependency while const data = usememo has dependencies of function and data used.

I'm not clearly sure why is it that way but so far that's what I've read up from internet.
And yeah the table being function part you probably overlooked. It is func in all of the examples. And it is a function because most likely in your real application the view and the table itself would be in separate files.