State is not the only input to `table.getRowModel()`. Replacing `data` from outside the table, such as a `setState` call, a query refetch, or a WebSocket message, does not change any state slice, so a `Subscribe` selector cannot detect it. When the body reads the table from `useTableContext()` inside `<table.AppTable>`, `AppTable` provides a new table value whenever the owner of `useAppTable` renders with new options, so the body updates without extra wiring. When you pass `table` as a prop through components that the compiler may skip, also pass `data` (or the rows you render) as a prop so the body renders again when the data changes.

import {

useContext,

useEffect,

useLayoutEffect,

useMemo,

useReducer,

useRef,

useState,

} from 'preact/hooks'

const useIsomorphicLayoutEffect =

typeof window === 'undefined' ? useEffect : useLayoutEffect

// Merge default options with provided options (provided takes precedence).

// Memoize the merge so stable caller options keep `table` stable; otherwise

// every owner render would refresh the AppTable context and re-render all

// `useTableContext()` consumers, even under a cached AppTable element.

const mergedTableOptions = useMemo(

() => ({ ...defaultTableOptions, ...tableOptions }),

[tableOptions],

)

mergedTableOptions as TableOptions<TFeatures, TData>,

// When the owner's output is cached (`useMemo`, `memo`), Preact skips the

// stable `AppTable` vnode, so its provider would keep the table from an

// earlier render. AppTable subscribes to owner commits and re-renders only

// when the table it last provided is outdated.

const [tableListeners] = useState(() => new Set<() => void>())

useIsomorphicLayoutEffect(() => {

tableListeners.forEach((listener) => listener())

}, [table])

const providedTableRef = useRef(currentTable)

providedTableRef.current = currentTable

const [, forceRender] = useReducer((count: number) => count + 1, 0)

useIsomorphicLayoutEffect(() => {

const listener = () => {

if (providedTableRef.current !== tableRef.current) {

forceRender(undefined)

}

}

tableListeners.add(listener)

return () => {

tableListeners.delete(listener)

}

}, [])

import { useEffect, useMemo, useState } from 'preact/hooks'

test.each([

['cached', true],

['uncached', false],

])(

'refreshes the AppTable context once when the owner replaces data under a %s element',

(_label, cacheTree) => {

const renderCaptor = vi.fn()

function RowNames() {

const table = appTable.useTableContext<Person>()

renderCaptor()

return (

<output aria-label="Context row names">

{table

.getRowModel()

.rows.map((row) => row.original.name)

.join(',')}

</output>

)

}

function TableHarness() {

const [data, setData] = useState([{ id: '1', name: 'Ada' }])

const table = appTable.useAppTable(

{ data, columns, getRowId: (row) => row.id },

() => null,

)

// The React Compiler caches this element because `table.AppTable` is

// stable, so React skips AppTable when only `data` changes.

const cachedTree = useMemo(

() => (

<table.AppTable>

<RowNames />

</table.AppTable>

),

[table.AppTable],

)

const tree = cacheTree ? (

cachedTree

) : (

<table.AppTable>

<RowNames />

</table.AppTable>

)

return (

<>

{tree}

<button onClick={() => setData([{ id: '1', name: 'Grace' }])}>

Replace data

</button>

</>

)

}

render(<TableHarness />)

expect(outputText('Context row names')).toBe('Ada')

expect(renderCaptor).toHaveBeenCalledTimes(1)

act(() => {

click('Replace data')

})

expect(outputText('Context row names')).toBe('Grace')

expect(renderCaptor).toHaveBeenCalledTimes(2)

},

)

test('keeps the AppTable context stable when the owner re-renders with the same options', () => {

const renderCaptor = vi.fn()

function RowNames() {

const table = appTable.useTableContext<Person>()

renderCaptor()

return (

<output aria-label="Context row names">

{table

.getRowModel()

.rows.map((row) => row.original.name)

.join(',')}

</output>

)

}

const data = [{ id: '1', name: 'Ada' }]

function TableHarness() {

const [count, setCount] = useState(0)

// The React Compiler memoizes these options because their inputs are

// stable, so an unrelated owner render should not refresh the context.

const tableOptions = useMemo(

() => ({ data, columns, getRowId: (row: Person) => row.id }),

[],

)

const table = appTable.useAppTable(tableOptions, () => null)

const cachedTree = useMemo(

() => (

<table.AppTable>

<RowNames />

</table.AppTable>

),

[table.AppTable],

)

return (

<>

{cachedTree}

<button onClick={() => setCount(count + 1)}>Render owner</button>

</>

)

}

render(<TableHarness />)

expect(outputText('Context row names')).toBe('Ada')

expect(renderCaptor).toHaveBeenCalledTimes(1)

act(() => {

click('Render owner')

})

act(() => {

click('Render owner')

})

expect(outputText('Context row names')).toBe('Ada')

expect(renderCaptor).toHaveBeenCalledTimes(1)

})

import React, {

createContext,

useContext,

useEffect,

useLayoutEffect,

useMemo,

useRef,

useState,

useSyncExternalStore,

} from 'react'

const useIsomorphicLayoutEffect =

typeof window === 'undefined' ? useEffect : useLayoutEffect

// Merge default options with provided options (provided takes precedence).

// Memoize the merge so stable caller options keep `table` stable; otherwise

// every owner render would refresh the AppTable context and re-render all

// `useTableContext()` consumers, even under a cached AppTable element.

const mergedTableOptions = useMemo(

() => ({ ...defaultTableOptions, ...tableOptions }),

[tableOptions],

)

mergedTableOptions as TableOptions<TFeatures, TData>,

// When the owner's output is cached (React Compiler, `useMemo`, `memo`),

// React skips the stable `AppTable` element, so its provider would keep

// the table from an earlier render. AppTable subscribes to owner commits

// and re-renders only when the table it last provided is outdated.

const [tableListeners] = useState(() => new Set<() => void>())

const [subscribeToTable] = useState(() => (listener: () => void) => {

tableListeners.add(listener)

return () => {

tableListeners.delete(listener)

}

})

useIsomorphicLayoutEffect(() => {

tableListeners.forEach((listener) => listener())

}, [table])

const getTable = () => tableRef.current

const currentTable = useSyncExternalStore(

subscribeToTable,

getTable,

getTable,

)

}, [subscribeToTable])