From 46921d567ef40fb4271621c817ddce11163c8581 Mon Sep 17 00:00:00 2001
From: riccardoperra <riccardo.perra@icloud.com>
Date: Mon, 27 Jul 2026 20:04:57 +0200
Subject: [PATCH 1/2] fix: react adapter sync state

---
 .../react/basic-external-atoms/src/main.tsx   |  18 +-
 .../tests/e2e/smoke.spec.ts                   |  27 +
 .../tests/e2e/smoke.spec.ts                   |  37 +
 packages/react-table/package.json             |   4 +-
 packages/react-table/src/reactivity.ts        | 116 ++-
 packages/react-table/src/useTable.ts          |  57 +-
 packages/react-table/tests/test-setup.ts      |   3 +
 packages/react-table/tests/useTable.test.tsx  | 930 ++++++++++++++++++
 packages/react-table/vite.config.ts           |   1 +
 .../src/core/table/constructTable.ts          |  30 +-
 .../src/core/table/coreTablesFeature.utils.ts |  41 +-
 .../tests/unit/core/tableAtoms.test.ts        |  38 +
 pnpm-lock.yaml                                |   6 +
 13 files changed, 1268 insertions(+), 40 deletions(-)
 create mode 100644 packages/react-table/tests/test-setup.ts
 create mode 100644 packages/react-table/tests/useTable.test.tsx

diff --git a/examples/react/basic-external-atoms/src/main.tsx b/examples/react/basic-external-atoms/src/main.tsx
index 6a1dd8a7c8..546512e67e 100644
--- a/examples/react/basic-external-atoms/src/main.tsx
+++ b/examples/react/basic-external-atoms/src/main.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import { TanStackDevtools } from '@tanstack/react-devtools'
 import ReactDOM from 'react-dom/client'
 import './index.css'
-import { useCreateAtom, useSelector } from '@tanstack/react-store'
+import { useCreateAtom } from '@tanstack/react-store'
 import {
   createColumnHelper,
   createPaginatedRowModel,
@@ -79,14 +79,8 @@ function App() {
     pageSize: 10,
   })
 
-  // Subscribe to each atom independently — fine-grained reactivity.
-  const sorting = useSelector(sortingAtom)
-  const pagination = useSelector(paginationAtom)
-
-  console.log('sorting', sorting)
-  console.log('pagination', pagination)
-
-  // Create the table and pass your per-slice external atoms.
+  // Pass the per-slice external atoms directly. The React adapter subscribes
+  // through table.store, so no separate useSelector call is needed here.
   const table = useTable(
     {
       key: 'basic-external-atoms', // needed for devtools
@@ -185,7 +179,7 @@ function App() {
         <span className="inline-controls">
           <div>Page</div>
           <strong>
-            {(table.atoms.pagination.get().pageIndex + 1).toLocaleString()} of{' '}
+            {(table.state.pagination.pageIndex + 1).toLocaleString()} of{' '}
             {table.getPageCount().toLocaleString()}
           </strong>
         </span>
@@ -195,7 +189,7 @@ function App() {
             type="number"
             min="1"
             max={table.getPageCount()}
-            defaultValue={table.atoms.pagination.get().pageIndex + 1}
+            defaultValue={table.state.pagination.pageIndex + 1}
             onChange={(e) => {
               const page = e.target.value ? Number(e.target.value) - 1 : 0
               table.setPageIndex(page)
@@ -204,7 +198,7 @@ function App() {
           />
         </span>
         <select
-          value={table.atoms.pagination.get().pageSize}
+          value={table.state.pagination.pageSize}
           onChange={(e) => {
             table.setPageSize(Number(e.target.value))
           }}
diff --git a/examples/react/basic-external-atoms/tests/e2e/smoke.spec.ts b/examples/react/basic-external-atoms/tests/e2e/smoke.spec.ts
index fc9a7906fb..4e8c89fde0 100644
--- a/examples/react/basic-external-atoms/tests/e2e/smoke.spec.ts
+++ b/examples/react/basic-external-atoms/tests/e2e/smoke.spec.ts
@@ -84,3 +84,30 @@ test('regenerates table data', async ({ page }) => {
     await server.close()
   }
 })
+
+test('updates from external atoms without an outer React subscription', async ({
+  page,
+}) => {
+  const { errors, server } = await openExample(page)
+
+  try {
+    const table = page.locator('table').first()
+    const nextPageButton = page.getByRole('button', {
+      name: '>',
+      exact: true,
+    })
+    const pageStatus = page.getByText(/^Page$/).locator('..')
+
+    await expect(table.locator('tbody tr').first()).toBeVisible()
+    await expect(pageStatus).toContainText('1 of 100')
+    const firstPageRow = await getFirstBodyRowText(table)
+
+    await nextPageButton.click()
+
+    await expect(pageStatus).toContainText('2 of 100')
+    await expect.poll(() => getFirstBodyRowText(table)).not.toBe(firstPageRow)
+    expect(errors).toEqual([])
+  } finally {
+    await server.close()
+  }
+})
diff --git a/examples/react/basic-external-state/tests/e2e/smoke.spec.ts b/examples/react/basic-external-state/tests/e2e/smoke.spec.ts
index fc9a7906fb..2c12272e09 100644
--- a/examples/react/basic-external-state/tests/e2e/smoke.spec.ts
+++ b/examples/react/basic-external-state/tests/e2e/smoke.spec.ts
@@ -84,3 +84,40 @@ test('regenerates table data', async ({ page }) => {
     await server.close()
   }
 })
+
+test('updates controlled pagination without render-phase errors', async ({
+  page,
+}) => {
+  const { errors, server } = await openExample(page)
+
+  try {
+    const table = page.locator('table').first()
+    const nextPageButton = page.getByRole('button', {
+      name: '>',
+      exact: true,
+    })
+    const pageStatus = page.getByText(/^Page$/).locator('..')
+
+    await expect(table.locator('tbody tr').first()).toBeVisible()
+    await expect(nextPageButton).toBeEnabled()
+    await expect(pageStatus).toContainText('1 of 100')
+
+    const firstPageRow = await getFirstBodyRowText(table)
+
+    await nextPageButton.click()
+
+    await expect(pageStatus).toContainText('2 of 100')
+    await expect.poll(() => getFirstBodyRowText(table)).not.toBe(firstPageRow)
+    expect(errors.join('\n')).not.toContain('Cannot update a component')
+
+    const secondPageRow = await getFirstBodyRowText(table)
+
+    await nextPageButton.click()
+
+    await expect(pageStatus).toContainText('3 of 100')
+    await expect.poll(() => getFirstBodyRowText(table)).not.toBe(secondPageRow)
+    expect(errors.join('\n')).not.toContain('Cannot update a component')
+  } finally {
+    await server.close()
+  }
+})
diff --git a/packages/react-table/package.json b/packages/react-table/package.json
index 304383f77f..cece148da7 100644
--- a/packages/react-table/package.json
+++ b/packages/react-table/package.json
@@ -55,10 +55,12 @@
   "devDependencies": {
     "@eslint-react/eslint-plugin": "^5.9.2",
     "@types/react": "^19.2.17",
+    "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^6.0.3",
     "eslint-plugin-react-compiler": "19.1.0-rc.2",
     "eslint-plugin-react-hooks": "^7.1.1",
-    "react": "^19.2.7"
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7"
   },
   "peerDependencies": {
     "react": ">=18"
diff --git a/packages/react-table/src/reactivity.ts b/packages/react-table/src/reactivity.ts
index bd86dab0fc..883774f8f1 100644
--- a/packages/react-table/src/reactivity.ts
+++ b/packages/react-table/src/reactivity.ts
@@ -1,16 +1,32 @@
 import { batch, createAtom } from '@tanstack/react-store'
+import { useRef, useState, useSyncExternalStore } from 'react'
+import type { Subscription } from '@tanstack/react-store'
 import type {
   TableAtomOptions,
   TableReactivityBindings,
 } from '@tanstack/table-core/reactivity'
 
+interface ExternalSource<T> {
+  get: () => T
+  subscribe: (listener: () => void) => Subscription
+}
+
+export interface ReactTableReactivityBindings extends TableReactivityBindings {
+  /**
+   * Invalidates readonly atoms after React commits updated plain options.
+   */
+  commit: () => void
+}
+
 /**
  * Creates the table-core reactivity bindings used by the React adapter.
  *
  * React stores table state in TanStack Store atoms and leaves options as plain
  * resolved data because `useTable` synchronizes options during render.
  */
-export function reactReactivity(): TableReactivityBindings {
+export function reactReactivity(): ReactTableReactivityBindings {
+  const commitAtom = createAtom(0)
+
   return {
     createOptionsStore: false,
     wrapExternalAtoms: false,
@@ -28,14 +44,106 @@ export function reactReactivity(): TableReactivityBindings {
     batch,
     untrack: (fn) => fn(),
     createReadonlyAtom: <T>(fn: () => T, options?: TableAtomOptions<T>) => {
-      return createAtom(() => fn(), {
-        compare: options?.compare,
-      })
+      const compare = options?.compare ?? Object.is
+      let hasSnapshot = false
+      let snapshot: T
+
+      // The returned atom is a live facade: get() must see the options from the
+      // render in progress, while subscribe() must only publish after commit.
+      // The hidden computed tracks both real atom dependencies and commitAtom,
+      // which covers changes whose only reactive source is a plain option
+      // (controlled state ownership, for example).
+      const getSnapshot = () => {
+        const nextSnapshot = fn()
+
+        if (!hasSnapshot || !compare(snapshot, nextSnapshot)) {
+          snapshot = nextSnapshot
+          hasSnapshot = true
+        }
+
+        return snapshot
+      }
+
+      const reactiveAtom = createAtom(
+        () => {
+          commitAtom.get()
+          return getSnapshot()
+        },
+        {
+          compare,
+        },
+      )
+
+      return {
+        get: getSnapshot,
+        subscribe: reactiveAtom.subscribe.bind(reactiveAtom),
+      }
     },
     createWritableAtom: <T>(value: T, options?: TableAtomOptions<T>) => {
       return createAtom(value, {
         compare: options?.compare,
       })
     },
+    commit: () => {
+      commitAtom.set((version) => version + 1)
+    },
   }
 }
+
+/**
+ * Selects the root table state while filtering notifications that merely
+ * publish a snapshot already read during the current React render.
+ *
+ * Isolated `table.Subscribe` consumers still receive the underlying store
+ * notification; only this hook's root subscription is filtered.
+ */
+export function useTableSelector<TState, TSelected>(
+  source: ExternalSource<TState>,
+  selector: ((state: TState) => TSelected) | undefined,
+  compare: (previous: TSelected, next: TSelected) => boolean,
+): TSelected {
+  const selectorRef = useRef(selector)
+  selectorRef.current = selector
+
+  const [selectedSource] = useState(() => {
+    let hasSnapshot = false
+    let snapshot: TSelected
+
+    const getSnapshot = () => {
+      const select =
+        selectorRef.current ??
+        ((state: TState) => state as unknown as TSelected)
+      const nextSnapshot = select(source.get())
+
+      if (!hasSnapshot || !compare(snapshot, nextSnapshot)) {
+        snapshot = nextSnapshot
+        hasSnapshot = true
+      }
+
+      return snapshot
+    }
+
+    return {
+      getSnapshot,
+      subscribe: (onStoreChange: () => void) => {
+        const subscription = source.subscribe(() => {
+          const previousSnapshot = snapshot
+          const hadSnapshot = hasSnapshot
+          const nextSnapshot = getSnapshot()
+
+          if (!hadSnapshot || !Object.is(previousSnapshot, nextSnapshot)) {
+            onStoreChange()
+          }
+        })
+
+        return () => subscription.unsubscribe()
+      },
+    }
+  })
+
+  return useSyncExternalStore(
+    selectedSource.subscribe,
+    selectedSource.getSnapshot,
+    selectedSource.getSnapshot,
+  )
+}
diff --git a/packages/react-table/src/useTable.ts b/packages/react-table/src/useTable.ts
index 4f4ee68fc3..e85f9c67fb 100644
--- a/packages/react-table/src/useTable.ts
+++ b/packages/react-table/src/useTable.ts
@@ -1,9 +1,13 @@
 'use client'
 
-import { useMemo, useState } from 'react'
+import { useEffect, useLayoutEffect, useMemo, useState } from 'react'
 import { constructTable } from '@tanstack/table-core'
-import { shallow, useSelector } from '@tanstack/react-store'
-import { reactReactivity } from './reactivity'
+import {
+  table_setOptions,
+  table_syncExternalStateToBaseAtoms,
+} from '@tanstack/table-core/static-functions'
+import { shallow } from '@tanstack/react-store'
+import { reactReactivity, useTableSelector } from './reactivity'
 import { FlexRender } from './FlexRender'
 import { Subscribe } from './Subscribe'
 import type { FlexRenderProps } from './FlexRender'
@@ -18,6 +22,9 @@ import type {
 } from '@tanstack/table-core'
 import type { FunctionComponent, ReactNode } from 'react'
 
+const useIsomorphicLayoutEffect =
+  typeof window === 'undefined' ? useEffect : useLayoutEffect
+
 export type ReactTable<
   TFeatures extends TableFeatures,
   TData extends RowData,
@@ -146,14 +153,16 @@ export function useTable<
   tableOptions: TableOptions<TFeatures, TData>,
   selector?: (state: TableState<TFeatures>) => TSelected,
 ): ReactTable<TFeatures, TData, TSelected> {
-  const [table] = useState(() => {
+  const [{ table, reactivity }] = useState(() => {
+    const reactivity = reactReactivity()
+
     // Explicit type arguments skip generic inference from the spread object (a
     // type-check hot spot); the spread only adds the react reactivity binding
     // to `features`.
     const tableInstance = constructTable<TFeatures, TData>({
       ...tableOptions,
       features: {
-        coreReactivityFeature: reactReactivity(),
+        coreReactivityFeature: reactivity,
         ...tableOptions.features,
       },
     }) as unknown as ReactTable<TFeatures, TData, TSelected>
@@ -169,16 +178,40 @@ export function useTable<
 
     tableInstance.FlexRender = FlexRender
 
-    return tableInstance
+    return {
+      table: tableInstance,
+      reactivity,
+    }
   })
 
-  // sync options on every render
-  table.setOptions((prev) => ({
-    ...prev,
-    ...tableOptions,
-  }))
+  const coreTable = table as unknown as Table<TFeatures, TData>
+
+  // Keep non-state options current during render, but publish controlled state
+  // into the subscribed atom graph only after React commits.
+  table_setOptions(
+    coreTable,
+    (prev) => ({
+      ...prev,
+      ...tableOptions,
+    }),
+    {
+      syncExternalState: false,
+    },
+  )
+
+  const controlledState = coreTable.options.state
+  const state = useTableSelector(table.store, selector, shallow)
 
-  const state = useSelector(table.store, selector, { compare: shallow })
+  useIsomorphicLayoutEffect(() => {
+    // Publish only the state captured by a committed render. The React
+    // readonly atoms already expose it through their live get(). Invalidating
+    // in the same pre-paint batch also updates isolated table.Subscribe
+    // consumers and handles changes in controlled/uncontrolled ownership.
+    reactivity.batch(() => {
+      table_syncExternalStateToBaseAtoms(coreTable, controlledState, shallow)
+      reactivity.commit()
+    })
+  })
 
   // we know this is not the most efficient way to return the table,
   // but it is required for the react compiler to work
diff --git a/packages/react-table/tests/test-setup.ts b/packages/react-table/tests/test-setup.ts
new file mode 100644
index 0000000000..ffc0b9a963
--- /dev/null
+++ b/packages/react-table/tests/test-setup.ts
@@ -0,0 +1,3 @@
+Object.assign(globalThis, {
+  IS_REACT_ACT_ENVIRONMENT: true,
+})
diff --git a/packages/react-table/tests/useTable.test.tsx b/packages/react-table/tests/useTable.test.tsx
new file mode 100644
index 0000000000..f249405408
--- /dev/null
+++ b/packages/react-table/tests/useTable.test.tsx
@@ -0,0 +1,930 @@
+import * as React from 'react'
+import { createRoot } from 'react-dom/client'
+import {
+  createPaginatedRowModel,
+  rowPaginationFeature,
+  tableFeatures,
+} from '@tanstack/table-core'
+import { createAtom } from '@tanstack/react-store'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { useTable } from '../src/useTable'
+import type { ColumnDef, PaginationState } from '@tanstack/table-core'
+import type { ReactTable } from '../src/useTable'
+import type { Root } from 'react-dom/client'
+
+const features = tableFeatures({
+  rowPaginationFeature,
+  paginatedRowModel: createPaginatedRowModel(),
+})
+
+type TestRow = {
+  id: number
+}
+
+type NullSelectedTable = ReactTable<typeof features, TestRow, null>
+
+const data: ReadonlyArray<TestRow> = Array.from({ length: 100 }, (_, id) => ({
+  id,
+}))
+const columns: ReadonlyArray<ColumnDef<typeof features, TestRow>> = []
+
+const IsolatedPaginationSubscriber = React.memo(
+  function IsolatedPaginationSubscriber({
+    Subscribe,
+  }: {
+    Subscribe: NullSelectedTable['Subscribe']
+  }) {
+    return (
+      <Subscribe selector={(state) => state.pagination.pageIndex}>
+        {(pageIndex) => (
+          <output data-testid="isolated-page-index">{pageIndex}</output>
+        )}
+      </Subscribe>
+    )
+  },
+)
+
+let container: HTMLDivElement | undefined
+let root: Root | undefined
+
+function render(element: React.ReactNode) {
+  container = document.createElement('div')
+  document.body.append(container)
+  root = createRoot(container)
+
+  React.act(() => {
+    root!.render(element)
+  })
+}
+
+afterEach(() => {
+  if (root) {
+    React.act(() => {
+      root!.unmount()
+    })
+  }
+
+  container?.remove()
+  container = undefined
+  root = undefined
+  vi.restoreAllMocks()
+})
+
+describe('useTable state subscriptions', () => {
+  it('reads controlled state from the live table store', () => {
+    let harnessRenderCount = 0
+    let setControlledPagination: React.Dispatch<
+      React.SetStateAction<PaginationState>
+    >
+    let storeSubscribe: ReturnType<typeof vi.spyOn> | undefined
+
+    function ControlledStateHarness() {
+      harnessRenderCount++
+      const [pagination, setPagination] = React.useState<PaginationState>({
+        pageIndex: 0,
+        pageSize: 10,
+      })
+      setControlledPagination = setPagination
+
+      const table = useTable(
+        {
+          features,
+          columns,
+          data,
+          state: {
+            pagination,
+          },
+        },
+        (state) => state.pagination.pageIndex,
+      )
+
+      // useSyncExternalStore subscribes after render. Installing the spy here
+      // distinguishes the root adapter subscription from table construction.
+      storeSubscribe ??= vi.spyOn(table.store, 'subscribe')
+
+      return (
+        <output data-testid="controlled-source-page-index">
+          {table.state}
+        </output>
+      )
+    }
+
+    render(<ControlledStateHarness />)
+
+    expect(storeSubscribe).toHaveBeenCalledTimes(1)
+    expect(harnessRenderCount).toBe(1)
+
+    React.act(() => {
+      setControlledPagination!({
+        pageIndex: 1,
+        pageSize: 10,
+      })
+    })
+
+    expect(
+      container?.querySelector('[data-testid="controlled-source-page-index"]')
+        ?.textContent,
+    ).toBe('1')
+    expect(harnessRenderCount).toBe(2)
+    expect(storeSubscribe).toHaveBeenCalledTimes(1)
+  })
+
+  it('resolves changes in slice ownership', () => {
+    let harnessRenderCount = 0
+
+    function OwnershipChangeHarness() {
+      harnessRenderCount++
+      const [controlled, setControlled] = React.useState(true)
+      const [pagination] = React.useState<PaginationState>({
+        pageIndex: 5,
+        pageSize: 10,
+      })
+      const table = useTable(
+        {
+          features,
+          columns,
+          data,
+          state: controlled
+            ? {
+                pagination,
+              }
+            : undefined,
+        },
+        (state) => state.pagination,
+      )
+
+      return (
+        <>
+          <button
+            data-testid="toggle-ownership"
+            onClick={() => setControlled((value) => !value)}
+          />
+          <button data-testid="next-page" onClick={() => table.nextPage()} />
+          <output data-testid="ownership-page-index">
+            {table.state.pageIndex}
+          </output>
+        </>
+      )
+    }
+
+    render(<OwnershipChangeHarness />)
+
+    const pageIndex = () =>
+      container?.querySelector('[data-testid="ownership-page-index"]')
+        ?.textContent
+
+    const toggleOwnership = () => {
+      const button = container?.querySelector<HTMLButtonElement>(
+        '[data-testid="toggle-ownership"]',
+      )
+      button?.click()
+    }
+
+    const nextPage = () => {
+      const button = container?.querySelector<HTMLButtonElement>(
+        '[data-testid="next-page"]',
+      )
+      button?.click()
+    }
+
+    expect(pageIndex()).toBe('5')
+    expect(harnessRenderCount).toBe(1)
+
+    React.act(() => {
+      toggleOwnership()
+    })
+
+    // Releasing control exposes the last committed controlled value in the
+    // base atom and installs the internal-atom subscription.
+    expect(pageIndex()).toBe('5')
+    expect(harnessRenderCount).toBe(2)
+
+    React.act(() => {
+      nextPage()
+    })
+
+    expect(pageIndex()).toBe('6')
+    expect(harnessRenderCount).toBe(3)
+
+    React.act(() => {
+      toggleOwnership()
+    })
+
+    expect(pageIndex()).toBe('5')
+    expect(harnessRenderCount).toBe(4)
+
+    React.act(() => {
+      nextPage()
+    })
+
+    // The controlled prop owns the slice again; base writes are not observed
+    // by the root hook.
+    expect(pageIndex()).toBe('5')
+    expect(harnessRenderCount).toBe(4)
+  })
+
+  it('invalidates an isolated subscriber when a controlled slice is released', () => {
+    function OwnershipReleaseHarness() {
+      const [controlled, setControlled] = React.useState(true)
+      const [pagination] = React.useState<PaginationState>({
+        pageIndex: 5,
+        pageSize: 10,
+      })
+      const table = useTable(
+        {
+          features,
+          columns,
+          data,
+          state: controlled ? { pagination } : undefined,
+        },
+        () => null,
+      )
+
+      return (
+        <>
+          <IsolatedPaginationSubscriber Subscribe={table.Subscribe} />
+          <button data-action="change-base" onClick={() => table.nextPage()} />
+          <button
+            data-action="release-control"
+            onClick={() => setControlled(false)}
+          />
+        </>
+      )
+    }
+
+    render(<OwnershipReleaseHarness />)
+
+    const isolatedPageIndex = () =>
+      container?.querySelector('[data-testid="isolated-page-index"]')
+        ?.textContent
+
+    expect(isolatedPageIndex()).toBe('5')
+
+    React.act(() => {
+      container
+        ?.querySelector('[data-action="change-base"]')
+        ?.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+    })
+
+    // The controlled value still wins even though the internal base moved.
+    expect(isolatedPageIndex()).toBe('5')
+
+    React.act(() => {
+      container
+        ?.querySelector('[data-action="release-control"]')
+        ?.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+    })
+
+    expect(isolatedPageIndex()).toBe('6')
+  })
+
+  it('subscribes to an external atom without an outer React subscription', () => {
+    const paginationAtom = createAtom<PaginationState>({
+      pageIndex: 0,
+      pageSize: 10,
+    })
+    let harnessRenderCount = 0
+
+    function ExternalAtomHarness() {
+      harnessRenderCount++
+      const table = useTable(
+        {
+          features,
+          columns,
+          data,
+          atoms: {
+            pagination: paginationAtom,
+          },
+        },
+        (state) => state.pagination.pageIndex,
+      )
+
+      return (
+        <>
+          <output data-testid="external-atom-page-index">{table.state}</output>
+          <output data-testid="external-atom-first-row">
+            {table.getRowModel().rows[0]?.original.id}
+          </output>
+        </>
+      )
+    }
+
+    render(<ExternalAtomHarness />)
+
+    expect(harnessRenderCount).toBe(1)
+
+    React.act(() => {
+      paginationAtom.set({
+        pageIndex: 0,
+        pageSize: 20,
+      })
+    })
+
+    expect(harnessRenderCount).toBe(1)
+
+    React.act(() => {
+      paginationAtom.set({
+        pageIndex: 1,
+        pageSize: 20,
+      })
+    })
+
+    expect(
+      container?.querySelector('[data-testid="external-atom-page-index"]')
+        ?.textContent,
+    ).toBe('1')
+    expect(
+      container?.querySelector('[data-testid="external-atom-first-row"]')
+        ?.textContent,
+    ).toBe('20')
+    expect(harnessRenderCount).toBe(2)
+  })
+
+  it('gives an external atom precedence over controlled state for the same slice', () => {
+    const paginationAtom = createAtom<PaginationState>({
+      pageIndex: 3,
+      pageSize: 10,
+    })
+    let harnessRenderCount = 0
+    let setControlledPagination: React.Dispatch<
+      React.SetStateAction<PaginationState>
+    >
+
+    function MixedOwnershipHarness() {
+      harnessRenderCount++
+      const [pagination, setPagination] = React.useState<PaginationState>({
+        pageIndex: 0,
+        pageSize: 10,
+      })
+      setControlledPagination = setPagination
+
+      const table = useTable(
+        {
+          features,
+          columns,
+          data,
+          atoms: {
+            pagination: paginationAtom,
+          },
+          state: {
+            pagination,
+          },
+        },
+        (state) => state.pagination.pageIndex,
+      )
+
+      return (
+        <>
+          <output data-testid="mixed-page-index">{table.state}</output>
+          <output data-testid="mixed-first-row">
+            {table.getRowModel().rows[0]?.original.id}
+          </output>
+        </>
+      )
+    }
+
+    render(<MixedOwnershipHarness />)
+
+    expect(
+      container?.querySelector('[data-testid="mixed-page-index"]')?.textContent,
+    ).toBe('3')
+    expect(
+      container?.querySelector('[data-testid="mixed-first-row"]')?.textContent,
+    ).toBe('30')
+    expect(harnessRenderCount).toBe(1)
+
+    React.act(() => {
+      setControlledPagination!({
+        pageIndex: 7,
+        pageSize: 10,
+      })
+    })
+
+    expect(
+      container?.querySelector('[data-testid="mixed-page-index"]')?.textContent,
+    ).toBe('3')
+    expect(harnessRenderCount).toBe(2)
+
+    React.act(() => {
+      paginationAtom.set({
+        pageIndex: 3,
+        pageSize: 20,
+      })
+    })
+
+    expect(harnessRenderCount).toBe(2)
+
+    React.act(() => {
+      paginationAtom.set({
+        pageIndex: 4,
+        pageSize: 10,
+      })
+    })
+
+    expect(
+      container?.querySelector('[data-testid="mixed-page-index"]')?.textContent,
+    ).toBe('4')
+    expect(
+      container?.querySelector('[data-testid="mixed-first-row"]')?.textContent,
+    ).toBe('40')
+    expect(harnessRenderCount).toBe(3)
+  })
+
+  it('does not publish controlled state from a suspended render', () => {
+    const suspendedRender = new Promise<never>(() => {})
+    let committedTable: ReactTable<typeof features, TestRow, PaginationState>
+
+    function SuspendedRender({ suspend }: { suspend: boolean }) {
+      if (suspend) {
+        throw suspendedRender
+      }
+
+      return null
+    }
+
+    function ConcurrentPaginationHarness() {
+      const [version, setVersion] = React.useState(0)
+      const pagination: PaginationState = {
+        pageIndex: version,
+        pageSize: 10,
+      }
+      const table = useTable(
+        {
+          features,
+          columns,
+          data,
+          state: {
+            pagination,
+          },
+        },
+        (state) => state.pagination,
+      )
+
+      React.useLayoutEffect(() => {
+        committedTable = table
+      }, [table])
+
+      return (
+        <>
+          <output data-testid="committed-page-index">
+            {table.state.pageIndex}
+          </output>
+          <button
+            onClick={() => {
+              React.startTransition(() => setVersion(1))
+            }}
+          >
+            Suspend next render
+          </button>
+          <SuspendedRender suspend={version === 1} />
+        </>
+      )
+    }
+
+    render(<ConcurrentPaginationHarness />)
+
+    expect(
+      container?.querySelector('[data-testid="committed-page-index"]')
+        ?.textContent,
+    ).toBe('0')
+    const storeNotifications: Array<number> = []
+    const subscription = committedTable!.store.subscribe((state) => {
+      storeNotifications.push(state.pagination.pageIndex)
+    })
+
+    React.act(() => {
+      container?.querySelector('button')?.dispatchEvent(
+        new MouseEvent('click', {
+          bubbles: true,
+        }),
+      )
+    })
+
+    // The previous UI is still committed while the transition is suspended.
+    expect(
+      container?.querySelector('[data-testid="committed-page-index"]')
+        ?.textContent,
+    ).toBe('0')
+    const committedBasePageIndex =
+      committedTable!.baseAtoms.pagination.get().pageIndex
+
+    subscription.unsubscribe()
+
+    expect(committedBasePageIndex).toBe(0)
+    expect(storeNotifications).toEqual([])
+  })
+
+  it('publishes controlled pagination after commit without a render-phase update', () => {
+    const renderSnapshots: Array<{
+      controlled: number
+      selected: number
+      atom: number
+      store: number
+      stableStoreSnapshot: boolean
+      firstRow: number
+    }> = []
+
+    function ControlledPaginationHarness() {
+      const [pagination, setPagination] = React.useState<PaginationState>({
+        pageIndex: 0,
+        pageSize: 10,
+      })
+      const table = useTable(
+        {
+          features,
+          columns,
+          data,
+          state: {
+            pagination,
+          },
+          onPaginationChange: setPagination,
+        },
+        (state) => state,
+      )
+
+      const firstStoreSnapshot = table.store.get()
+      const secondStoreSnapshot = table.store.get()
+
+      renderSnapshots.push({
+        controlled: pagination.pageIndex,
+        selected: table.state.pagination.pageIndex,
+        atom: table.atoms.pagination.get().pageIndex,
+        store: firstStoreSnapshot.pagination.pageIndex,
+        stableStoreSnapshot: Object.is(firstStoreSnapshot, secondStoreSnapshot),
+        firstRow: table.getRowModel().rows[0]?.original.id ?? -1,
+      })
+
+      return (
+        <>
+          <output data-testid="page-index">
+            {table.state.pagination.pageIndex}
+          </output>
+          <output data-testid="atom-page-index">
+            {table.atoms.pagination.get().pageIndex}
+          </output>
+          <table.Subscribe selector={(state) => state.pagination.pageIndex}>
+            {(pageIndex) => (
+              <output data-testid="subscribed-page-index">{pageIndex}</output>
+            )}
+          </table.Subscribe>
+          <button onClick={() => table.nextPage()}>Next page</button>
+        </>
+      )
+    }
+
+    const consoleError = vi.spyOn(console, 'error').mockImplementation(() => {})
+
+    render(
+      <React.StrictMode>
+        <ControlledPaginationHarness />
+      </React.StrictMode>,
+    )
+
+    const pageIndex = () =>
+      container?.querySelector('[data-testid="page-index"]')?.textContent
+    const atomPageIndex = () =>
+      container?.querySelector('[data-testid="atom-page-index"]')?.textContent
+    const subscribedPageIndex = () =>
+      container?.querySelector('[data-testid="subscribed-page-index"]')
+        ?.textContent
+    const nextPage = () =>
+      container?.querySelector('button')?.dispatchEvent(
+        new MouseEvent('click', {
+          bubbles: true,
+        }),
+      )
+
+    expect(pageIndex()).toBe('0')
+    expect(atomPageIndex()).toBe('0')
+    expect(subscribedPageIndex()).toBe('0')
+    React.act(() => {
+      nextPage()
+    })
+    expect(pageIndex()).toBe('1')
+    expect(atomPageIndex()).toBe('1')
+    expect(subscribedPageIndex()).toBe('1')
+
+    React.act(() => {
+      nextPage()
+    })
+    expect(pageIndex()).toBe('2')
+    expect(atomPageIndex()).toBe('2')
+    expect(subscribedPageIndex()).toBe('2')
+    expect(renderSnapshots).toContainEqual({
+      controlled: 1,
+      selected: 1,
+      atom: 1,
+      store: 1,
+      stableStoreSnapshot: true,
+      firstRow: 10,
+    })
+    expect(renderSnapshots).toContainEqual({
+      controlled: 2,
+      selected: 2,
+      atom: 2,
+      store: 2,
+      stableStoreSnapshot: true,
+      firstRow: 20,
+    })
+    expect(
+      renderSnapshots.every(
+        ({
+          controlled,
+          selected,
+          atom,
+          store,
+          stableStoreSnapshot,
+          firstRow,
+        }) =>
+          controlled === selected &&
+          selected === atom &&
+          atom === store &&
+          stableStoreSnapshot &&
+          firstRow === controlled * 10,
+      ),
+    ).toBe(true)
+
+    const errors = consoleError.mock.calls.flat().map(String).join('\n')
+
+    expect(errors).not.toContain('Cannot update a component')
+  })
+
+  it('updates an isolated subscriber after rapid controlled updates', () => {
+    function IsolatedControlledPaginationHarness() {
+      const [pagination, setPagination] = React.useState<PaginationState>({
+        pageIndex: 0,
+        pageSize: 10,
+      })
+      const table = useTable(
+        {
+          features,
+          columns,
+          data,
+          state: {
+            pagination,
+          },
+          onPaginationChange: setPagination,
+        },
+        () => null,
+      )
+
+      return (
+        <>
+          <output data-testid="controlled-page-index">
+            {pagination.pageIndex}
+          </output>
+          <IsolatedPaginationSubscriber Subscribe={table.Subscribe} />
+          <button
+            onClick={() => {
+              table.nextPage()
+              table.nextPage()
+              table.nextPage()
+            }}
+          >
+            Advance three pages
+          </button>
+        </>
+      )
+    }
+
+    const consoleError = vi.spyOn(console, 'error').mockImplementation(() => {})
+
+    render(<IsolatedControlledPaginationHarness />)
+
+    const controlledPageIndex = () =>
+      container?.querySelector('[data-testid="controlled-page-index"]')
+        ?.textContent
+    const isolatedPageIndex = () =>
+      container?.querySelector('[data-testid="isolated-page-index"]')
+        ?.textContent
+
+    expect(controlledPageIndex()).toBe('0')
+    expect(isolatedPageIndex()).toBe('0')
+
+    React.act(() => {
+      container?.querySelector('button')?.dispatchEvent(
+        new MouseEvent('click', {
+          bubbles: true,
+        }),
+      )
+    })
+
+    expect(controlledPageIndex()).toBe('3')
+    expect(isolatedPageIndex()).toBe('3')
+
+    const errors = consoleError.mock.calls.flat().map(String).join('\n')
+
+    expect(errors).not.toContain('Cannot update a component')
+  })
+
+  it('does not re-render when an uncontrolled update misses the selected slice', () => {
+    let harnessRenderCount = 0
+
+    function SelectedPageIndexHarness() {
+      harnessRenderCount++
+
+      const table = useTable(
+        {
+          features,
+          columns,
+          data,
+        },
+        (state) => state.pagination.pageIndex,
+      )
+
+      return (
+        <>
+          <output data-testid="selected-page-index">{table.state}</output>
+          <output data-testid="harness-render-count">
+            {harnessRenderCount}
+          </output>
+          <table.Subscribe selector={(state) => state.pagination.pageSize}>
+            {(pageSize) => (
+              <output data-testid="subscribed-page-size">{pageSize}</output>
+            )}
+          </table.Subscribe>
+          <button
+            data-action="resize-page"
+            onClick={() => table.setPageSize(20)}
+          >
+            Resize page
+          </button>
+          <button data-action="next-page" onClick={() => table.nextPage()}>
+            Next page
+          </button>
+        </>
+      )
+    }
+
+    render(<SelectedPageIndexHarness />)
+
+    const selectedPageIndex = () =>
+      container?.querySelector('[data-testid="selected-page-index"]')
+        ?.textContent
+    const subscribedPageSize = () =>
+      container?.querySelector('[data-testid="subscribed-page-size"]')
+        ?.textContent
+
+    expect(harnessRenderCount).toBe(1)
+    expect(selectedPageIndex()).toBe('0')
+    expect(subscribedPageSize()).toBe('10')
+
+    React.act(() => {
+      container
+        ?.querySelector('[data-action="resize-page"]')
+        ?.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+    })
+
+    expect(harnessRenderCount).toBe(1)
+    expect(selectedPageIndex()).toBe('0')
+    expect(subscribedPageSize()).toBe('20')
+
+    React.act(() => {
+      container
+        ?.querySelector('[data-action="next-page"]')
+        ?.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+    })
+
+    expect(harnessRenderCount).toBe(2)
+    expect(selectedPageIndex()).toBe('1')
+  })
+
+  it('settles when a controlled slice is recreated during an unrelated render', () => {
+    function RecreatedControlledSliceHarness() {
+      const [pagination, setPagination] = React.useState<PaginationState>({
+        pageIndex: 0,
+        pageSize: 10,
+      })
+      const [tick, setTick] = React.useState(0)
+      const table = useTable(
+        {
+          features,
+          columns,
+          data,
+          state: {
+            pagination: { ...pagination },
+          },
+          onPaginationChange: setPagination,
+        },
+        (state) => state,
+      )
+
+      return (
+        <>
+          <output data-testid="unrelated-tick">{tick}</output>
+          <output data-testid="recreated-page-index">
+            {table.state.pagination.pageIndex}
+          </output>
+          <output data-testid="recreated-atom-page-index">
+            {table.atoms.pagination.get().pageIndex}
+          </output>
+          <button
+            data-action="unrelated-update"
+            onClick={() => setTick((value) => value + 1)}
+          >
+            Unrelated update
+          </button>
+          <button
+            data-action="controlled-next-page"
+            onClick={() => table.nextPage()}
+          >
+            Next page
+          </button>
+        </>
+      )
+    }
+
+    const consoleError = vi.spyOn(console, 'error').mockImplementation(() => {})
+
+    render(<RecreatedControlledSliceHarness />)
+
+    React.act(() => {
+      container
+        ?.querySelector('[data-action="unrelated-update"]')
+        ?.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+    })
+
+    expect(
+      container?.querySelector('[data-testid="unrelated-tick"]')?.textContent,
+    ).toBe('1')
+    expect(
+      container?.querySelector('[data-testid="recreated-page-index"]')
+        ?.textContent,
+    ).toBe('0')
+
+    React.act(() => {
+      container
+        ?.querySelector('[data-action="controlled-next-page"]')
+        ?.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+    })
+
+    expect(
+      container?.querySelector('[data-testid="recreated-page-index"]')
+        ?.textContent,
+    ).toBe('1')
+    expect(
+      container?.querySelector('[data-testid="recreated-atom-page-index"]')
+        ?.textContent,
+    ).toBe('1')
+
+    const errors = consoleError.mock.calls.flat().map(String).join('\n')
+
+    expect(errors).not.toContain('Maximum update depth exceeded')
+  })
+
+  it('returns the selected slice and still reacts to uncontrolled updates', () => {
+    function UncontrolledPaginationHarness() {
+      const table = useTable(
+        {
+          features,
+          columns,
+          data,
+        },
+        (state) => ({
+          pageIndex: state.pagination.pageIndex,
+        }),
+      )
+
+      return (
+        <>
+          <output data-testid="page-index">{table.state.pageIndex}</output>
+          <output data-testid="selected-state">
+            {JSON.stringify(table.state)}
+          </output>
+          <button onClick={() => table.nextPage()}>Next page</button>
+        </>
+      )
+    }
+
+    const consoleError = vi.spyOn(console, 'error').mockImplementation(() => {})
+
+    render(<UncontrolledPaginationHarness />)
+
+    const pageIndex = () =>
+      container?.querySelector('[data-testid="page-index"]')?.textContent
+    const selectedState = () =>
+      container?.querySelector('[data-testid="selected-state"]')?.textContent
+    const nextPage = () =>
+      container?.querySelector('button')?.dispatchEvent(
+        new MouseEvent('click', {
+          bubbles: true,
+        }),
+      )
+
+    expect(selectedState()).toBe('{"pageIndex":0}')
+    expect(pageIndex()).toBe('0')
+    React.act(() => {
+      nextPage()
+    })
+    expect(pageIndex()).toBe('1')
+
+    React.act(() => {
+      nextPage()
+    })
+    expect(pageIndex()).toBe('2')
+
+    const errors = consoleError.mock.calls.flat().map(String).join('\n')
+
+    expect(errors).not.toContain('The result of getSnapshot should be cached')
+  })
+})
diff --git a/packages/react-table/vite.config.ts b/packages/react-table/vite.config.ts
index 42096c8406..92d9339465 100644
--- a/packages/react-table/vite.config.ts
+++ b/packages/react-table/vite.config.ts
@@ -10,5 +10,6 @@ export default defineConfig({
     watch: false,
     environment: 'jsdom',
     globals: true,
+    setupFiles: ['./tests/test-setup.ts'],
   },
 })
diff --git a/packages/table-core/src/core/table/constructTable.ts b/packages/table-core/src/core/table/constructTable.ts
index 3a2f648966..d7b4a41ac8 100644
--- a/packages/table-core/src/core/table/constructTable.ts
+++ b/packages/table-core/src/core/table/constructTable.ts
@@ -1,5 +1,6 @@
+import { shallow } from '@tanstack/store'
 import { coreFeatures } from '../coreFeatures'
-import { cloneState } from '../../utils'
+import { cloneState, hasOwn } from '../../utils'
 import { atomToStore } from '../reactivity/coreReactivityFeature.utils'
 import { table_syncExternalStateToBaseAtoms } from './coreTablesFeature.utils'
 import type { Atom } from '@tanstack/store'
@@ -133,18 +134,30 @@ export function constructTable<
         debugName: `table/baseAtoms/${key}`,
       },
     ) as any
-
-    // create readonly derived atom: on each get(), read either external atom or base atom
     ;(table.atoms as any)[key] = _reactivity.createReadonlyAtom(
       () => {
-        const externalAtoms = table.options.atoms as
+        const options = table.options
+        const externalAtoms = options.atoms as
           | Partial<Record<keyof TableState_All, Atom<unknown>>>
           | undefined
         const externalAtom = externalAtoms?.[key]
+        // Always touch the reactive owner so controlled state still has an
+        // invalidation source when it is published after a framework commit.
+        const reactiveState = externalAtom
+          ? externalAtom.get()
+          : table.baseAtoms[key]!.get()
+
         if (externalAtom) {
-          return externalAtom.get()
+          return reactiveState
         }
-        return table.baseAtoms[key]!.get()
+
+        const controlledState = options.state as
+          | Record<string, unknown>
+          | undefined
+
+        return controlledState && hasOwn(controlledState, key)
+          ? controlledState[key]
+          : reactiveState
       },
       { debugName: `table/atoms/${key}` },
     )
@@ -162,7 +175,10 @@ export function constructTable<
         }
         return snapshot
       },
-      { debugName: 'table/store' },
+      {
+        compare: shallow,
+        debugName: 'table/store',
+      },
     ),
   )
 
diff --git a/packages/table-core/src/core/table/coreTablesFeature.utils.ts b/packages/table-core/src/core/table/coreTablesFeature.utils.ts
index 5003aa6cd4..977508837e 100644
--- a/packages/table-core/src/core/table/coreTablesFeature.utils.ts
+++ b/packages/table-core/src/core/table/coreTablesFeature.utils.ts
@@ -3,12 +3,16 @@ import type { RowData, Updater } from '../../types/type-utils'
 import type { TableFeatures } from '../../types/TableFeatures'
 import type { Table_Internal } from '../../types/Table'
 import type { TableOptions } from '../../types/TableOptions'
+import type { TableState } from '../../types/TableState'
 
 /**
  * Synchronizes externally controlled state slices into the table's base atoms.
  *
  * This keeps legacy `options.state` values reflected in the atom graph so
  * derived atoms, stores, and table APIs read a consistent snapshot.
+ * Passing an explicit state snapshot lets framework adapters publish the state
+ * captured by a committed render. An optional comparator can suppress
+ * semantically unchanged slice writes; the default remains `Object.is`.
  *
  * @example
  * ```ts
@@ -18,8 +22,30 @@ import type { TableOptions } from '../../types/TableOptions'
 export function table_syncExternalStateToBaseAtoms<
   TFeatures extends TableFeatures,
   TData extends RowData,
->(table: Table_Internal<TFeatures, TData>): void {
-  const state = table.options.state
+>(table: Table_Internal<TFeatures, TData>): void
+export function table_syncExternalStateToBaseAtoms<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+>(
+  table: Table_Internal<TFeatures, TData>,
+  state: Partial<TableState<TFeatures>> | undefined,
+  compare?: (currentState: unknown, externalState: unknown) => boolean,
+): void
+export function table_syncExternalStateToBaseAtoms<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+>(
+  table: Table_Internal<TFeatures, TData>,
+  state?: Partial<TableState<TFeatures>>,
+  compare: (
+    currentState: unknown,
+    externalState: unknown,
+  ) => boolean = Object.is,
+): void {
+  // The second overload intentionally distinguishes an omitted argument from
+  // an explicitly captured `undefined` state.
+  state = arguments.length === 1 ? table.options.state : state
+
   if (!state) {
     return
   }
@@ -32,7 +58,8 @@ export function table_syncExternalStateToBaseAtoms<
       }
 
       const externalState = state[key as keyof typeof state]
-      if (externalState !== table._reactivity.untrack(() => baseAtom.get())) {
+      const currentState = table._reactivity.untrack(() => baseAtom.get())
+      if (!compare(currentState, externalState)) {
         baseAtom.set(() => externalState)
       }
     }
@@ -147,6 +174,7 @@ export function table_mergeOptions<
  * @example
  * ```ts
  * table_setOptions(table, (old) => old)
+ * table_setOptions(table, (old) => old, { syncExternalState: false })
  * ```
  */
 export function table_setOptions<
@@ -155,6 +183,9 @@ export function table_setOptions<
 >(
   table: Table_Internal<TFeatures, TData>,
   updater: Updater<TableOptions<TFeatures, TData>>,
+  options?: {
+    syncExternalState?: boolean
+  },
 ): void {
   const newOptions = functionalUpdate(
     updater,
@@ -167,5 +198,7 @@ export function table_setOptions<
   } else {
     table.options = mergedOptions
   }
-  table_syncExternalStateToBaseAtoms(table)
+  if (options?.syncExternalState !== false) {
+    table_syncExternalStateToBaseAtoms(table)
+  }
 }
diff --git a/packages/table-core/tests/unit/core/tableAtoms.test.ts b/packages/table-core/tests/unit/core/tableAtoms.test.ts
index 441be055f4..23191ef22c 100644
--- a/packages/table-core/tests/unit/core/tableAtoms.test.ts
+++ b/packages/table-core/tests/unit/core/tableAtoms.test.ts
@@ -6,12 +6,17 @@ import {
   rowSelectionFeature,
   rowSortingFeature,
 } from '../../../src'
+import {
+  table_setOptions,
+  table_syncExternalStateToBaseAtoms,
+} from '../../../src/static-functions'
 import { testFeatures } from '../../fixtures/features'
 import type {
   PaginationState,
   SortingState,
   Table,
   TableOptions,
+  Table_Internal,
 } from '../../../src'
 
 const features = testFeatures({
@@ -68,6 +73,39 @@ describe('three-layer atom architecture', () => {
       expect(table.store.state.sorting).toEqual(external)
     })
 
+    it('can defer options.state synchronization for framework adapters', () => {
+      const table = makeTable()
+      const internalTable = table as unknown as Table_Internal<
+        typeof features,
+        any
+      >
+      const controlled: SortingState = [{ id: 'controlled', desc: false }]
+
+      table_setOptions(
+        internalTable,
+        (options) => ({
+          ...options,
+          state: {
+            sorting: controlled,
+          },
+        }),
+        {
+          syncExternalState: false,
+        },
+      )
+
+      expect(table.options.state?.sorting).toBe(controlled)
+      expect(table.baseAtoms.sorting.get()).toEqual([])
+      expect(table.atoms.sorting.get()).toBe(controlled)
+      expect(table.store.get().sorting).toBe(controlled)
+
+      table_syncExternalStateToBaseAtoms(internalTable, {
+        sorting: controlled,
+      })
+
+      expect(table.baseAtoms.sorting.get()).toBe(controlled)
+    })
+
     it('options.atoms[key] takes precedence over options.state[key] when both are present', () => {
       const externalAtom = createAtom<SortingState>([
         { id: 'fromAtom', desc: true },
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 7c93c0d915..aee6f9673f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -13077,6 +13077,9 @@ importers:
       '@types/react':
         specifier: 19.2.16
         version: 19.2.16
+      '@types/react-dom':
+        specifier: ^19.2.3
+        version: 19.2.3(@types/react@19.2.16)
       '@vitejs/plugin-react':
         specifier: ^6.0.3
         version: 6.0.3(@rolldown/plugin-babel@0.2.3(@babel/core@7.29.7)(@babel/plugin-transform-runtime@7.29.7(@babel/core@7.29.7))(@babel/runtime@7.29.7)(rolldown@1.1.5)(vite@8.1.4(@types/node@26.0.0)(esbuild@0.28.0)(jiti@2.7.0)(less@4.6.4)(sass@1.100.0)(sugarss@5.0.1(postcss@8.5.16))(terser@5.46.2)(yaml@2.9.0)))(babel-plugin-react-compiler@1.0.0)(vite@8.1.4(@types/node@26.0.0)(esbuild@0.28.0)(jiti@2.7.0)(less@4.6.4)(sass@1.100.0)(sugarss@5.0.1(postcss@8.5.16))(terser@5.46.2)(yaml@2.9.0))
@@ -13089,6 +13092,9 @@ importers:
       react:
         specifier: ^19.2.7
         version: 19.2.7
+      react-dom:
+        specifier: ^19.2.7
+        version: 19.2.7(react@19.2.7)
 
   packages/react-table-devtools:
     dependencies:

From d0f7a3e1c5b44f620ab901e1ff16bd27ca472137 Mon Sep 17 00:00:00 2001
From: riccardoperra <riccardo.perra@icloud.com>
Date: Mon, 27 Jul 2026 20:14:34 +0200
Subject: [PATCH 2/2] Some changes

---
 packages/react-table/src/reactivity.ts       | 77 ++++++++++----------
 packages/react-table/src/useTable.ts         | 11 +--
 packages/react-table/tests/useTable.test.tsx | 12 ++-
 3 files changed, 56 insertions(+), 44 deletions(-)

diff --git a/packages/react-table/src/reactivity.ts b/packages/react-table/src/reactivity.ts
index 883774f8f1..1e7cfdbaf9 100644
--- a/packages/react-table/src/reactivity.ts
+++ b/packages/react-table/src/reactivity.ts
@@ -1,5 +1,5 @@
-import { batch, createAtom } from '@tanstack/react-store'
-import { useRef, useState, useSyncExternalStore } from 'react'
+import { batch, createAtom, useSelector } from '@tanstack/react-store'
+import { useEffect, useLayoutEffect, useRef, useState } from 'react'
 import type { Subscription } from '@tanstack/react-store'
 import type {
   TableAtomOptions,
@@ -8,9 +8,12 @@ import type {
 
 interface ExternalSource<T> {
   get: () => T
-  subscribe: (listener: () => void) => Subscription
+  subscribe: (listener: (value: T) => void) => Subscription
 }
 
+export const useIsomorphicLayoutEffect =
+  typeof window === 'undefined' ? useEffect : useLayoutEffect
+
 export interface ReactTableReactivityBindings extends TableReactivityBindings {
   /**
    * Invalidates readonly atoms after React commits updated plain options.
@@ -102,48 +105,46 @@ export function useTableSelector<TState, TSelected>(
   selector: ((state: TState) => TSelected) | undefined,
   compare: (previous: TSelected, next: TSelected) => boolean,
 ): TSelected {
-  const selectorRef = useRef(selector)
-  selectorRef.current = selector
-
-  const [selectedSource] = useState(() => {
-    let hasSnapshot = false
-    let snapshot: TSelected
-
-    const getSnapshot = () => {
-      const select =
-        selectorRef.current ??
-        ((state: TState) => state as unknown as TSelected)
-      const nextSnapshot = select(source.get())
-
-      if (!hasSnapshot || !compare(snapshot, nextSnapshot)) {
-        snapshot = nextSnapshot
-        hasSnapshot = true
+  const committedSelectorRef = useRef(selector)
+  const committedSelectionRef = useRef<
+    | { hasSnapshot: false }
+    | {
+        hasSnapshot: true
+        snapshot: TSelected
       }
+  >({ hasSnapshot: false })
 
-      return snapshot
-    }
-
+  const [filteredSource] = useState(() => {
     return {
-      getSnapshot,
-      subscribe: (onStoreChange: () => void) => {
-        const subscription = source.subscribe(() => {
-          const previousSnapshot = snapshot
-          const hadSnapshot = hasSnapshot
-          const nextSnapshot = getSnapshot()
-
-          if (!hadSnapshot || !Object.is(previousSnapshot, nextSnapshot)) {
-            onStoreChange()
+      get: () => source.get(),
+      subscribe: (onStoreChange: (value: TState) => void) => {
+        return source.subscribe((nextState) => {
+          const select =
+            committedSelectorRef.current ??
+            ((state: TState) => state as unknown as TSelected)
+          const nextSelection = select(nextState)
+          const committedSelection = committedSelectionRef.current
+
+          if (
+            !committedSelection.hasSnapshot ||
+            !compare(committedSelection.snapshot, nextSelection)
+          ) {
+            onStoreChange(nextState)
           }
         })
-
-        return () => subscription.unsubscribe()
       },
     }
   })
 
-  return useSyncExternalStore(
-    selectedSource.subscribe,
-    selectedSource.getSnapshot,
-    selectedSource.getSnapshot,
-  )
+  const selected = useSelector(filteredSource, selector, { compare })
+
+  useIsomorphicLayoutEffect(() => {
+    committedSelectorRef.current = selector
+    committedSelectionRef.current = {
+      hasSnapshot: true,
+      snapshot: selected,
+    }
+  })
+
+  return selected
 }
diff --git a/packages/react-table/src/useTable.ts b/packages/react-table/src/useTable.ts
index e85f9c67fb..b5ae06d637 100644
--- a/packages/react-table/src/useTable.ts
+++ b/packages/react-table/src/useTable.ts
@@ -1,13 +1,17 @@
 'use client'
 
-import { useEffect, useLayoutEffect, useMemo, useState } from 'react'
+import { useMemo, useState } from 'react'
 import { constructTable } from '@tanstack/table-core'
 import {
   table_setOptions,
   table_syncExternalStateToBaseAtoms,
 } from '@tanstack/table-core/static-functions'
 import { shallow } from '@tanstack/react-store'
-import { reactReactivity, useTableSelector } from './reactivity'
+import {
+  reactReactivity,
+  useIsomorphicLayoutEffect,
+  useTableSelector,
+} from './reactivity'
 import { FlexRender } from './FlexRender'
 import { Subscribe } from './Subscribe'
 import type { FlexRenderProps } from './FlexRender'
@@ -22,9 +26,6 @@ import type {
 } from '@tanstack/table-core'
 import type { FunctionComponent, ReactNode } from 'react'
 
-const useIsomorphicLayoutEffect =
-  typeof window === 'undefined' ? useEffect : useLayoutEffect
-
 export type ReactTable<
   TFeatures extends TableFeatures,
   TData extends RowData,
diff --git a/packages/react-table/tests/useTable.test.tsx b/packages/react-table/tests/useTable.test.tsx
index f249405408..72ae67f3ce 100644
--- a/packages/react-table/tests/useTable.test.tsx
+++ b/packages/react-table/tests/useTable.test.tsx
@@ -430,7 +430,10 @@ describe('useTable state subscriptions', () => {
     expect(harnessRenderCount).toBe(3)
   })
 
-  it('does not publish controlled state from a suspended render', () => {
+  it('does not mutate base state or notify subscribers from a suspended render', () => {
+    // `table.options` is still shared by the table instance, so this test is
+    // intentionally about committed reactive publication rather than
+    // render-local isolation of imperative getters.
     const suspendedRender = new Promise<never>(() => {})
     let committedTable: ReactTable<typeof features, TestRow, PaginationState>
 
@@ -790,7 +793,10 @@ describe('useTable state subscriptions', () => {
   })
 
   it('settles when a controlled slice is recreated during an unrelated render', () => {
+    let harnessRenderCount = 0
+
     function RecreatedControlledSliceHarness() {
+      harnessRenderCount++
       const [pagination, setPagination] = React.useState<PaginationState>({
         pageIndex: 0,
         pageSize: 10,
@@ -838,6 +844,8 @@ describe('useTable state subscriptions', () => {
 
     render(<RecreatedControlledSliceHarness />)
 
+    expect(harnessRenderCount).toBe(1)
+
     React.act(() => {
       container
         ?.querySelector('[data-action="unrelated-update"]')
@@ -851,6 +859,7 @@ describe('useTable state subscriptions', () => {
       container?.querySelector('[data-testid="recreated-page-index"]')
         ?.textContent,
     ).toBe('0')
+    expect(harnessRenderCount).toBe(2)
 
     React.act(() => {
       container
@@ -866,6 +875,7 @@ describe('useTable state subscriptions', () => {
       container?.querySelector('[data-testid="recreated-atom-page-index"]')
         ?.textContent,
     ).toBe('1')
+    expect(harnessRenderCount).toBe(3)
 
     const errors = consoleError.mock.calls.flat().map(String).join('\n')