Skip to content

Commit 114e45d

Browse files
fix(react-table): fix infinite rerender issue in useLegacyTable (#6202)
1 parent 34df449 commit 114e45d

File tree

2 files changed

+14
-13
lines changed

2 files changed

+14
-13
lines changed

packages/react-table/src/Subscribe.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
'use client'
22

3-
import { useStore } from '@tanstack/react-store'
3+
import { shallow, useStore } from '@tanstack/react-store'
44
import type {
55
NoInfer,
66
RowData,
@@ -63,7 +63,7 @@ export function Subscribe<
6363
>(
6464
props: SubscribeProps<TFeatures, TData, TSelected>,
6565
): ReturnType<FunctionComponent> {
66-
const selected = useStore(props.table.store, props.selector)
66+
const selected = useStore(props.table.store, props.selector, shallow)
6767

6868
return typeof props.children === 'function'
6969
? props.children(selected)

packages/react-table/src/useLegacyTable.ts

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,8 @@ import {
1515
sortFns,
1616
stockFeatures,
1717
} from '@tanstack/table-core'
18-
import { useMemo } from 'react'
19-
import { useStore } from '@tanstack/react-store'
18+
import { useCallback, useMemo } from 'react'
19+
import { shallow, useStore } from '@tanstack/react-store'
2020
import { useTable } from './useTable'
2121
import type {
2222
Cell,
@@ -419,20 +419,21 @@ export function useLegacyTable<TData extends RowData>(
419419
}
420420

421421
// Call useTable with the v9 API, subscribing to all state changes
422-
const table = useTable<StockFeatures, TData, TableState<StockFeatures>>({
423-
...restOptions,
424-
_features: stockFeatures,
425-
_rowModels,
426-
} as TableOptions<StockFeatures, TData>)
427-
428-
const state = useStore(table.store, (state) => state)
422+
const table = useTable<StockFeatures, TData, TableState<StockFeatures>>(
423+
{
424+
...restOptions,
425+
_features: stockFeatures,
426+
_rowModels,
427+
} as TableOptions<StockFeatures, TData>,
428+
(state) => state,
429+
)
429430

430431
return useMemo(
431432
() =>
432433
({
433434
...table,
434-
getState: () => state,
435+
getState: () => table.state,
435436
}) as LegacyReactTable<TData>,
436-
[table, state],
437+
[table],
437438
)
438439
}

0 commit comments

Comments
 (0)