Skip to content

fix(react): table sorting example delay #993

New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

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.

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

Successfully merging this pull request may close these issues.

2 participants