From 5253658385e3c18cd87a72864a10b94fffa10fb0 Mon Sep 17 00:00:00 2001 From: Giulio Bracci Date: Mon, 5 May 2025 13:26:29 +0200 Subject: [PATCH] fix(react): table sorting example delay This commit ensures a fluid user experience when applying sorting on TanStack table by reading the deferred value instead of the actual state. --- examples/react/table/src/main.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/examples/react/table/src/main.tsx b/examples/react/table/src/main.tsx index 0bdbe7d6..661f072e 100644 --- a/examples/react/table/src/main.tsx +++ b/examples/react/table/src/main.tsx @@ -9,12 +9,13 @@ import { useReactTable, } from '@tanstack/react-table' import { makeData } from './makeData' -import type { ColumnDef, Row, SortingState } from '@tanstack/react-table' +import type { ColumnDef, SortingState } from '@tanstack/react-table' import type { Person } from './makeData' import './index.css' function ReactTableVirtualized() { - const [sorting, setSorting] = React.useState([]) + const [_sorting, setSorting] = React.useState([]) + const sorting = React.useDeferredValue(_sorting); const columns = React.useMemo>>( () => [ @@ -61,7 +62,7 @@ function ReactTableVirtualized() { [], ) - const [data, setData] = React.useState(() => makeData(50_000)) + const [data] = React.useState(() => makeData(50_000)) const table = useReactTable({ data,