TanStack / virtual

🤖 Headless UI for Virtualizing Large Element Lists in JS/TS, React, Solid, Vue and Svelte
https://tanstack.com/virtual
MIT License
5.55k stars 303 forks source link

Reactivity issues when using with Solid Start #795

Closed Huliiiiii closed 3 months ago

Huliiiiii commented 3 months ago

Describe the bug

"@solidjs/start": "1.0.6", "@tanstack/solid-virtual": "^3.8.6", "solid-js": "^1.8.21", ~~1. Virtualizer is not reactive unless wrapped with an arrow function. I tried getter from #661 and createMemo, but neither worked.

  1. Virtual lists with initial count > 0 caused hydration mismatch errors on refresh and won not render the list at fisrt when navigate to that page.~~ (This is caused by the callback ref, replace it with a variable and everything will work fine.)

Your minimal, reproducible example

https://codesandbox.io/p/github/Huliiiiii/tanstack_virtual_issues_repro/main?import=true

Steps to reproduce

Check sandbox

Expected behavior

createVirtualizer should be reactive when using with solid / solid-start without wrap with any functions and memos.

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

Windows 11 Chrome 127.0.6533.100

tanstack-virtual version

v3.8.6

TypeScript version

v5.6.0

Additional context

No response

Terms & Code of Conduct