React-table resizable does not work when an array is directly passed to useReactTable hook

[elilondon]

Describe the bug

When trying to resize using @tanstack/react-table, my sandbox breaks.

Your minimal, reproducible example

https://codesandbox.io/s/condescending-chatelet-fr2e1r?file=/src/App.tsx

Steps to reproduce

1. Got to sandbox
2. Try to resize columns after they load

Result: Complete failure

Expected behavior

Columns should resize

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

Google chrome @latest in codesandbox

react-table version

8.5.11

TypeScript version

Not sure - assume codesandbox uses latest

Additional context

I have also tried to implement the columns with the createColumnHelper but this gave the same result.

Terms & Code of Conduct

• [X] I agree to follow this project's Code of Conduct
• [X] I understand that if my bug cannot be reliable reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.

[ghost]

The problem is that your rows are not memoized which causes your table to keep rerendering. You need to wrap your data with useMemo.

[elilondon]

@codymurdoc I see that this does work when memoized but the docs don't allude to this. The docs basically say I can pass an array as long as it matches my data for the rows (which in this case it does.) The examples from useReactTable also do not memoize but use a setState. If you cannot pass an array directly to the useReactTable hook could you please point me to the docs that say this?

[KevinVandy]

useState also creates a stable reference until its data updates. Creating it as an array in the component is what results in the data being recreated by react every render