router icon indicating copy to clipboard operation
router copied to clipboard

@tanstack/react-virtual window virtualizer dynamic measurement not working for items rendered on the server

Open idonov opened this issue 1 year ago • 0 comments

Describe the bug

After moving to tanstack router, the window virtualizer dynamic measurement stoped working for server rendered items.

I see no hydration errors, but for the items rendered on the server the measurement is not working if the item height changes on the client. If you scroll away the items and scroll back, measurement will start working again for the same items on height change.

Your Example Website or App

https://stackblitz.com/~/github.com/idonov/tanstack-router?file=examples/react/basic-ssr-file-based/src/routes/index.tsx

Steps to Reproduce the Bug or Issue

  1. Open & run the basic-ssr-file-based example from the forked repo
  2. Refresh the page
  3. Click the expand button on one of the items from the top that were rendered on the server
  4. Notice the virtualizer does not update their height, but expanding any of the client rendered items from below works correctly
  5. Scroll down until the server rendered items are not visible and then scroll back up.
  6. Click expand/shrink again on the top items, notice the measurement now works.

Expected behavior

I expect items rendered on the server to properly be measured on the client when they change height without them having to be re-rendered by scrolling away and back.

Screenshots or Videos

image

Platform

  • OS: macOS
  • Browser: Chrome
  • Version: Sanoma

Additional context

No response

idonov avatar Jul 26 '24 21:07 idonov