CODEWITHSUNDEEP
reactjsreact-virtualizedtanstacktanstack-table
Eduardo Pacheco
Eduardo Pacheco

Reputation: 11

How to improve scroll performance of react tanstack table with virtualization?

We're having a big problem in our app where the each row rendering in our table adds a high overhead and blocks the JS main thread with long tasks, making the app feel over slow and sluggish. We're using a virtualized table with Tanstack virtual with ~10 columns.

Our cells are not complex by any means in terms of logic but each of them do have some custom components that may include dropdowns and tooltips and could result with a few nested nodes. I've created an example that simulates the behavior we're getting when scrolling fast down and up https://codesandbox.io/p/devbox/zen-smoke-r4vtgj.

Any ideas on how to improve the performance?

Removing the "complex" cells does fix the problem but that's not the solution I'm looking for. Is there a way to optimize these row renders so that they don't take as much processing power?

Upvotes: 1

Views: 1514

Answers (1)

lice
lice

Reputation: 1

I found a simple solution to the (complex component rendering problem) at least in my case i was getting excessive blanking of the page as my laggy components were loading in as i scrolled etc.

by rendering the rows as a non complex component like a spinner or something, using useEffect to determine if it is fully rendered, you can resolve most of the major blanking issues. There may be a more elegant solution but this might be helpful for you.

for example you would do something like this

const MyLaggyComponent = () => {
  const [isLoading, setIsLoading] = useState(true);
  useEffect(() => {
    setIsLoading(false);
  }, []);

  return isLoading ? (<SomeSpinner/>) : (<> My laggy component stuff here</>
}

Upvotes: 0

Related Questions