custom Data within expanding example Crashing browser

[Oceanestars]

Describe the bug

Hi,
I've taken this example: https://tanstack.com/table/v8/docs/examples/react/expanding
Removed things like the search filter and some extra debug but beside that I didn't change how expanding works.
For testing purposes I went and made my own data. A simple json and to be as close to the example as possible I print out data and put that in its own object and removed the useState data and I'm just passing the object with its subRows directly to useReactTable. When doing that the browser will crash. I'm brand new to TanStack and may not be understanding how subRows works but I feel like this shouldn't be crashing when I pass it the object when all it takes is any[](Ideally this should thrown an error but not sure where it's getting stuck in almost a loop, this is an assumption).
This however, does not crash if I pass the object to the useState(initialize).

Here is the sandbox

To be more specific, in the sandbox I have where it works and where it doesn't. To highlight where it doesn't:

const data = [
  {
    "firstName": "Daryl",
    "lastName": "Rutherford",
    "age": 15,
    "visits": 945,
    "progress": 46,
    "status": "single",
    "subRows": [
        {
            "firstName": "Kobe",
            "lastName": "Lakin",
            "age": 20,
            "visits": 308,
            "progress": 19,
            "status": "single",
            "subRows": [
                {
                    "firstName": "Edyth",
                    "lastName": "Klocko",
                    "age": 38,
                    "visits": 362,
                    "progress": 29,
                    "status": "single"
                },
                {
                    "firstName": "Alayna",
                    "lastName": "Stroman",
                    "age": 11,
                    "visits": 120,
                    "progress": 25,
                    "status": "single"
                },
                {
                    "firstName": "Carolyn",
                    "lastName": "Rowe-Hammes",
                    "age": 14,
                    "visits": 14,
                    "progress": 77,
                    "status": "relationship"
                }
            ]
        },
        {
            "firstName": "Cassandre",
            "lastName": "Hudson",
            "age": 27,
            "visits": 488,
            "progress": 65,
            "status": "relationship",
            "subRows": [
                {
                    "firstName": "Cade",
                    "lastName": "Hartmann-Effertz",
                    "age": 22,
                    "visits": 901,
                    "progress": 93,
                    "status": "single"
                },
                {
                    "firstName": "Pietro",
                    "lastName": "Yost",
                    "age": 7,
                    "visits": 731,
                    "progress": 99,
                    "status": "complicated"
                },
                {
                    "firstName": "Payton",
                    "lastName": "Kessler",
                    "age": 26,
                    "visits": 851,
                    "progress": 83,
                    "status": "complicated"
                }
            ]
        },
        {
            "firstName": "Nels",
            "lastName": "Kunde",
            "age": 6,
            "visits": 307,
            "progress": 52,
            "status": "complicated",
            "subRows": [
                {
                    "firstName": "Nikki",
                    "lastName": "Hackett",
                    "age": 9,
                    "visits": 518,
                    "progress": 44,
                    "status": "single"
                },
                {
                    "firstName": "Cornell",
                    "lastName": "Gulgowski",
                    "age": 27,
                    "visits": 810,
                    "progress": 60,
                    "status": "complicated"
                },
                {
                    "firstName": "Jordan",
                    "lastName": "Bode",
                    "age": 26,
                    "visits": 15,
                    "progress": 93,
                    "status": "relationship"
                }
            ]
        },
        {
            "firstName": "Alberta",
            "lastName": "Heaney",
            "age": 20,
            "visits": 15,
            "progress": 57,
            "status": "complicated",
            "subRows": [
                {
                    "firstName": "Braxton",
                    "lastName": "Kuvalis",
                    "age": 11,
                    "visits": 366,
                    "progress": 93,
                    "status": "relationship"
                },
                {
                    "firstName": "Elyssa",
                    "lastName": "Rolfson",
                    "age": 30,
                    "visits": 144,
                    "progress": 39,
                    "status": "relationship"
                },
                {
                    "firstName": "Jennyfer",
                    "lastName": "Altenwerth",
                    "age": 28,
                    "visits": 200,
                    "progress": 30,
                    "status": "single"
                }
            ]
        },
        {
            "firstName": "Bertrand",
            "lastName": "Shields",
            "age": 40,
            "visits": 733,
            "progress": 20,
            "status": "complicated",
            "subRows": [
                {
                    "firstName": "Liliane",
                    "lastName": "Hudson",
                    "age": 38,
                    "visits": 649,
                    "progress": 85,
                    "status": "single"
                },
                {
                    "firstName": "Jevon",
                    "lastName": "Lemke",
                    "age": 32,
                    "visits": 5,
                    "progress": 89,
                    "status": "relationship"
                },
                {
                    "firstName": "Donavon",
                    "lastName": "Zemlak",
                    "age": 11,
                    "visits": 20,
                    "progress": 62,
                    "status": "complicated"
                }
            ]
        }
    ]
}
] 

const table = useReactTable({
    data,
    columns,
    state: {
      expanded,
    },
    onExpandedChange: setExpanded,
    getSubRows: row => row.subRows,
    getCoreRowModel: getCoreRowModel(),
    getPaginationRowModel: getPaginationRowModel(),
    getFilteredRowModel: getFilteredRowModel(),
    getExpandedRowModel: getExpandedRowModel(),
    debugTable: true,
  })

// etc .....

Your minimal, reproducible example

https://codesandbox.io/p/sandbox/confident-boyd-przwfd?layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522cloyw4otq000b356hisiifrwr%2522%252C%2522sizes%2522%253A%255B70%252C30%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522cloyw4otp0003356h0ybmt814%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522cloyw4otq0008356hc0hfqnik%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522cloyw4otq000a356hjk6r9kry%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B50%252C50%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522cloyw4otp0003356h0ybmt814%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522cloyw4otp0002356h7q2ak4ya%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252FREADME.md%2522%257D%255D%252C%2522id%2522%253A%2522cloyw4otp0003356h0ybmt814%2522%252C%2522activeTabId%2522%253A%2522cloyw4otp0002356h7q2ak4ya%2522%257D%252C%2522cloyw4otq000a356hjk6r9kry%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522cloyw4otq0009356hce6oqi2i%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522TASK_PORT%2522%252C%2522taskId%2522%253A%2522dev%2522%252C%2522port%2522%253A5176%252C%2522path%2522%253A%2522%252F%2522%257D%255D%252C%2522id%2522%253A%2522cloyw4otq000a356hjk6r9kry%2522%252C%2522activeTabId%2522%253A%2522cloyw4otq0009356hce6oqi2i%2522%257D%252C%2522cloyw4otq0008356hc0hfqnik%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522cloyw4otq0004356h9xu1efl9%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522TASK_LOG%2522%252C%2522taskId%2522%253A%2522dev%2522%257D%252C%257B%2522id%2522%253A%2522cloyw4otq0005356h28uf1vza%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522TASK_LOG%2522%252C%2522taskId%2522%253A%2522build%2522%257D%252C%257B%2522id%2522%253A%2522cloyw4otq0006356hn7bkxz9e%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522TASK_LOG%2522%252C%2522taskId%2522%253A%2522serve%2522%257D%252C%257B%2522id%2522%253A%2522cloyw4otq0007356hp0sbtyfs%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522TASK_LOG%2522%252C%2522taskId%2522%253A%2522start%2522%257D%255D%252C%2522id%2522%253A%2522cloyw4otq0008356hc0hfqnik%2522%252C%2522activeTabId%2522%253A%2522cloyw4otq0004356h9xu1efl9%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Atrue%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D

Steps to reproduce

1. Uncomment Line 302 - 483 and comment out 117-299

Expected behavior

I expect it to work because I'm still passing an array. But if this isn't correct then I'd expect an error.

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

Linux & codesandbox

react-table version

8.10.7

TypeScript version

4.8.4

Additional context

No response

Terms & Code of Conduct

• I agree to follow this project's Code of Conduct
• 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.

[barrymichaeldoyle]

I'm struggling with the same issue. I have a UI where I do some updates where when I select a row I want it to only render that selected row.

I tried this and it crashes every time.

useReactTable({
    data: selectedRow ? [selectedRow] : data || [],
    columns: myColumns,
    getCoreRowModel: getCoreRowModel(),
  });

EDIT: memoizing the data sorted this out for me :)

[tam11a]

use the useMemo() hook for passing data when we trigger any state variable that changes on the page. Changing the state variable causes re-render and don't know why the useReactTable hook is initialized to re-render all the configurations we make on the table. You can watch the debugger if your change causes anything like that by adding debugAll: true on useReactTable().

if this is the issue, passing data in the following may help you.

const table = useReactTable({
    data: React.useMemo(() => data, [data]),
    columns,
    getCoreRowModel: getCoreRowModel(),
})

[PBK-B]

@tannerlinsley @tanstack/react-table@8.21.2 The same problem here is the empty array of data data of useReactTable seems to cause this problem. I will describe this problem in detail later. If I have time, I will try to find the reason.

[PBK-B]

@tannerlinsley I have a minimal reproduction example here, and I observed that it might also be related to multiple calls to table.getRowModel().rows ?

import { useState, useMemo } from 'react';
import { ColumnDef, getCoreRowModel, useReactTable } from '@tanstack/react-table';

type ListViewProps = {
    data: any[];
};

const columns: ColumnDef<any>[] = [
    {
        accessorKey: 'id',
        header: 'Id',
    },
    {
        accessorKey: 'name',
        header: 'Name',
    },
    {
        header: '',
        id: 'actions',
    },
];
const ListView = (props: ListViewProps) => {
    // const data = props.data; // Work ✅
    // const [data, setData] = useState([]); // Work ✅
    // const data = useMemo(() => [], []); // Work ✅
    const data: any[] = []; // Oops 💥

    const table = useReactTable<any>({
        data,
        columns,
        getCoreRowModel: getCoreRowModel(),
        debugAll: true,
    });

    return (
        <table>
            <thead>
                {table.getHeaderGroups().map((headerGroup) => (
                    <tr key={headerGroup.id}>
                        {columns.map((column, index) => (
                            <td key={`table_head_${index}_${column.id}`}>{typeof column.header == 'string' ? column.header : ''}</td>
                        ))}
                    </tr>
                ))}
            </thead>

            <tbody>
                {table.getRowModel().rows.length ? (
                    table.getRowModel().rows.map((row, index) => (
                        <tr
                            key={`list_item_${row.id}_${index}`}
                            data-state={row.getIsSelected() && 'selected'}
                            onClick={() => {
                                console.log('id', row.id);
                            }}>
                            <td>{row.original.id}</td>
                            <td>{row.original.name}</td>
                            <td>
                                <button>Cancel</button>
                            </td>
                        </tr>
                    ))
                ) : (
                    <tr>
                        <td colSpan={columns.length} className="h-24 text-center">
                            No data available.
                        </td>
                    </tr>
                )}
            </tbody>
        </table>
    );
};

export default ListView;

[Chthol1y]

I have the same problem. I'm using an empty array to create a table that's displayed as a sub-table in row expansions. The page freezes when I expand two row

data: React.useMemo(() => data, [data]) fix the problem

[uap-dev]

Not sure if I my issue lines up with the repro case, but getting a page crash and isolated it to the table component.

Update: memoizing the data seemed to fix the issue, but doesn't make sense to me why that would cause a crash. I was toggling btw two pages one with table one without and whenever I toggled back to the page with table it would crash, initial SSR load was fine.

const table = useReactTable({
    // Crashes browser
    data: members.map((member) => ({
      member,
      organization,
    })),
    columns,
    getCoreRowModel: getCoreRowModel(),
  })

const table = useReactTable({
    // Prevents crash
    data: useMemo(() => {
      return members.map((member) => ({
        member,
        organization,
      }))
    }, [members, organization]),
    columns,
    getCoreRowModel: getCoreRowModel(),
  })

[christianalares]

This is an old issue, but still relevant. If you hit browser hangs or apparent infinite render loops with TanStack Table, double-check that every value passed to useReactTable has a stable reference.

In my case, the problem was not the table rows themselves. It was unstable fallback values from localStorage-backed hooks, like returning a new [] or {} during mount/hydration for controlled table state.

Things to check:

• Do not create data, columns, or state inline in the useReactTable config.
• Memoize transformed data before passing it to the table.
• Memoize generated columns, or define static columns outside the component.
• Do not return fresh fallback arrays/objects from hooks used by table state.
• Prefer primitive accessor values for filtering/sorting instead of arrays/objects.

Example bug pattern:

return [isMounted ? value : [], setValue] as const

Better:

const EMPTY_SORTING = []

return [isMounted ? value : EMPTY_SORTING, setValue] as const

Here is a prompt I now use with LLMs when debugging TanStack Table issues:

Important TanStack Table warning:

I have repeatedly hit browser hangs / infinite render loops with TanStack Table when data, columns, or controlled table state are not referentially stable.

Before writing or changing any TanStack Table code, check for these pitfalls:

1. Never pass inline-created arrays/objects/functions to useReactTable for:

   • data
   • columns
   • state
   • controlled state fallback values
   • filtered/transformed data

2. If data is transformed before passing to useReactTable, memoize it:

   Good:

   const filteredData = useMemo(() => data.filter(...), [data, filters])

   Bad:

   data: data.filter(...)

3. If columns are generated from props/data, memoize them:

   const columns = useMemo(() => getColumns(deps), [deps])

   If columns are module-level constants, pass them directly.

4. Do not return fresh fallback arrays/objects from hooks that feed table state:

   Bad:

   return isMounted ? value : []
   return isMounted ? value : {}

   Good:

   const EMPTY_SORTING = []
   const EMPTY_VISIBILITY = {}
   
   return isMounted ? value : EMPTY_SORTING
   return isMounted ? value : EMPTY_VISIBILITY

5. Be careful with localStorage/hydration hooks. During the initial mount, fallback values must be stable references and should match the app’s real defaults where possible.

6. Avoid complex accessor values for globally filtered columns. Prefer primitive strings/numbers:

   Bad:

   accessorFn: row => row.seats

   Good:

   accessorFn: row => row.seats.map(({ seat }) => seat.label).join('/')

7. If the browser hangs, debug in this order:

   • Render without useReactTable
   • Add useReactTable with 1 plain column
   • Add full data
   • Add controlled sorting/visibility/filtering one at a time
   • Add real columns one at a time
   • Add your actual table renderer last

Goal: ensure all references passed into useReactTable are stable across renders unless their true dependencies changed.

The short version: with TanStack Table, unstable references are not just a performance nit. They can cause full browser hangs.