Skip to content

Conversation

giuliobracci
Copy link

This commit ensures a fluid user experience when applying sorting on TanStack table by reading the deferred value instead of the actual state.

This commit ensures a fluid user experience when applying sorting on
TanStack table by reading the deferred value instead of the actual
state.
import type { Person } from './makeData'
import './index.css'

function ReactTableVirtualized() {
const [sorting, setSorting] = React.useState<SortingState>([])
const [_sorting, setSorting] = React.useState<SortingState>([])
const sorting = React.useDeferredValue(_sorting);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@giuliobracci Hmm, virtualized tables already improve performance by only rendering visible rows. I'm a bit concerned this might give the impression that useDeferredValue is needed in most cases, which isn't really true.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi @piecyk you can try the diff with the example.
To me through stackblitz it seems that the lag is very noticeable when applying sorting.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants