Empty data causes infinite looping

[tiagooliveira08]

Describe the bug

Following the oficial example virtualized-infinite-scrolling and setting the data as empty causes infinite looping, from what I investigated this happens when calling the getCoreRowModel function.

Your minimal, reproducible example

https://codesandbox.io/s/inspiring-ardinghelli-6hrj4z?file=/src/main.tsx

Steps to reproduce

Go to console and view logs

Expected behavior

With the empty array in the data property it shouldn't cause infinite loop

How often does this bug happen?

every time

Screenshots or Videos

Platform

Alls

react-table version

8.7.0

TypeScript version

No response

Additional context

No response

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.

[tiagooliveira08]

this is also happening on a dashboard I'm working on.

[mttigg]

I'm also seeing this when selecting rows.

[DoronTorangy]

happens to me too, it makes the library unusable

[mattleonowicz]

Guys, you pass new instance of data with each render. data has to be stable. If you need empty array, at least declare it next to the component const emptyArray = []; and use that instead of inlined []. Because [] !== [], but emptyArray === emptyArray

[tifandotme]

I tried to memoized where my data is coming from, so its doesn't change every new render:

const customerListMemo = useMemo(
    () => Object.entries(customerList || {}),
    [customerList]
  );

  const table = useReactTable({
    data: customerListMemo,
    columns,
    getCoreRowModel: getCoreRowModel(),
    debugTable: true,
  });

This solved my problem

[snebjorn]

I just ran into this issue. It took a long time to figure out that it was useReactTable that was causing the infinite rerenders.

useReactTable.data doesn't accept undefined so obviously I did useReactTable({ data: myData ?? [] }) 😭

Shouldn't this be documented somewhere? And/Or shown how to deal with undefined data in the examples?

Or even better (maybe) useReactTable.data should accept undefined

[MDziurakh]

I just ran into this issue. It took a long time to figure out that it was useReactTable that was causing the infinite rerenders.

useReactTable.data doesn't accept undefined so obviously I did useReactTable({ data: myData ?? [] }) 😭

Shouldn't this be documented somewhere? And/Or shown how to deal with undefined data in the examples?

Or even better (maybe) useReactTable.data should accept undefined

@snebjorn, did you find the best way to do it?

[snebjorn]

yes, as mentioned above

// outside component
const emptyArray = []

// inside component
useReactTable({ data: myData ?? emptyArray })

[galih9]

any update on this? the above answer does solve the issue, but i dont think it should be use that way every time, it should be fixed from the package

[KevinVandy]

any update on this? the above answer does solve the issue, but i dont think it should be use that way every time, it should be fixed from the package

You would have to change how React fundamentally works. And rerendering when the data changes is a good, and expected behavior. It seems to just not be obvious to all that that is what can happen here if data doesn't have a stable reference.

[admondtamang]

 // Ensure data is an array and has a stable identity
  const tableData = useMemo(() => data ?? [], [data]);

  const table = useReactTable({
    columns,
    data: tableData,
  });

This helped me avoid infinite looping.