Infinite loop when using table with async data

[Rutvik-Sanathra]

Hey @KevinVandy First of all, thank you for this amazing library it's been a game-changer for our data-heavy applications! 🙌

Problem Statement

I encountered an infinite loop issue when using the table with async data fetched via TanStack Query and wanted to confirm if this is expected behaviour or if there's a better solution.

Reproduction Scenario:

1. Component fetches data asynchronously using TanStack Query
2. Columns are defined inside the component body
3. Infinite re-renders occur when dependencies change and are passed into the query.
4. The issue does not happen on the first render but occurs on subsequent renders when dependencies are updated.
5. The loop stops when:
   • An empty check (data?.length) is added, or
   • The is removed from the table.

And also wrapped columns into the useMemo but still goes on an infinity loop.

Question

1. Why does removing tBody or adding an empty check resolve the infinite loop? Is this a workaround or the intended behaviour?

[KevinVandy]

https://tanstack.com/table/latest/docs/faq#how-do-i-stop-infinite-rendering-loops

[tamish-max]

What usually causes this in TanStack Table is not the async fetch itself, but an unstable reference being passed into useReactTable after the query updates.

Two common culprits:

// bad: creates a new array every render while data is undefined
const data = query.data ?? []

and columns that are recreated with changing deps.

A stable version looks like this:

const EMPTY: RowType[] = []

function MyTable() {
  const { data = EMPTY } = useQuery(...)

  const columns = useMemo(() => [
    columnHelper.accessor('name', { header: 'Name' }),
  ], [])

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

Why does tbody / data?.length appear to "fix" it? Because those change whether row-model work actually runs, which can hide the unstable-input problem. It is more symptom masking than a real fix.

So I'd treat the empty check as a clue, not the final solution. The real fix is:

• stable fallback array declared outside the component
• memoized columns with stable deps
• no state updates during render based on table/query output