-
-
Notifications
You must be signed in to change notification settings - Fork 3.5k
alpha: useTable causes "Cannot update a component (SubscribeBound) while rendering" after setOptions moved to render body #6224
Copy link
Copy link
Open
Description
TanStack Table version
9.0.0-alpha.20 through alpha.23
Framework/Library version
React v19.2.4
Describe the bug and the steps to reproduce it
Since alpha.20 (cd97cfd), useTable calls table.setOptions() during render instead of in useEffect. This synchronously flushes store subscribers — including SubscribeBound — causing React to warn:
Cannot update a component (`SubscribeBound`) while rendering a different component (`Table`).
Minimal reproduction
import { useState } from 'react'
import { type ColumnDef, tableFeatures, useTable, globalFilteringFeature } from '@tanstack/react-table'
const _features = tableFeatures({ globalFilteringFeature })
const columns: ColumnDef<typeof _features, { id: string; name: string }>[] = [
{ accessorKey: 'name', header: 'Name' },
]
const data = [{ id: '1', name: 'Alice' }]
function Table({ globalFilter }: { globalFilter: string }) {
const table = useTable({
_features,
data,
columns,
state: { globalFilter },
})
return (
<table.Subscribe selector={s => ({ globalFilter: s.globalFilter })}>
{() => <span>ok</span>}
</table.Subscribe>
)
}
export default function App() {
const [n, setN] = useState(0)
return (
<>
<button onClick={() => setN(c => c + 1)}>Increment ({n})</button>
<Table globalFilter={`filter-${n}`} />
</>
)
}Open the console, click "Increment" — warning appears on first click.
Possible Cause
setOptions → optionsStore.setState() → atom.set() → propagate + flush() — all synchronous during render. The flush runs subscription effects that call table.store.get() (recomputes, always a new object from spread), which notifies SubscribeBound's useSyncExternalStoreWithSelector listener — a setState call during another component's render phase.
Versions
@tanstack/react-table: 9.0.0-alpha.20 through alpha.23@tanstack/store: 0.9.3react: 19.2.4
Your Minimal, Reproducible Example - (Sandbox Highly Recommended)
https://codesandbox.io/p/sandbox/pfm358
Screenshots or Videos (Optional)
No response
Do you intend to try to help solve this bug with your own PR?
No, because I do not know how
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.
Reactions are currently unavailable
Metadata
Metadata
Assignees
Labels
No labels