Skip to content

fix(react): table sorting example delay #993

New issue

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

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

Already on GitHub? Sign in 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.

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