Skip to content

alpha: useTable causes "Cannot update a component (SubscribeBound) while rendering" after setOptions moved to render body #6224

@d3lay

Description

@d3lay

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

setOptionsoptionsStore.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.3
  • react: 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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions