router
router copied to clipboard
@tanstack/react-virtual window virtualizer dynamic measurement not working for items rendered on the server
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
- Open & run the basic-ssr-file-based example from the forked repo
- Refresh the page
- Click the expand button on one of the items from the top that were rendered on the server
- Notice the virtualizer does not update their height, but expanding any of the client rendered items from below works correctly
- Scroll down until the server rendered items are not visible and then scroll back up.
- 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
Platform
- OS: macOS
- Browser: Chrome
- Version: Sanoma
Additional context
No response