SolidJS•2mo ago

Tanstack virtual

I have been trying to recreate this infinite scroll example https://tanstack.com/virtual/latest/docs/framework/react/examples/infinite-scroll , but I am really blocked, it is 100% skill issue so my use I have explained in the code block for better context https://www.notion.so/1d693fabeac180c6af04ead686825ff3?source=copy_link This really got me scratching my head and I cant think of a way to tackle it , any help will be appreciated

React TanStack Virtual Infinite Scroll Example | TanStack Virtual Docs

An example showing how to implement Infinite Scroll in React using TanStack Virtual.

Abdulrhman Burqaa's Notion on Notion

Notion | The connected workspace with site publishing

main.tsx
const itemSize = 56; const pageSize = 10; const [limit, setLimit] = createSignal(pageSize); const [feedbacks, feedbacksResult] = useQuery(query.limit(limit()))..... // reactive query where feedbacks is an Accessor<Obj>[] let parentRef!: HTMLDivElement; // tableref returns setter, and observer for width and height const { ref: tabl...

6 Replies

Madaxen86•2mo ago

setLimit inside the createEffect will create an infinite loop because you are also using limit() in the same effect. Try to put that logic inside the setLimit:

setLimit(prev => {
 if (lastItem.pageIndex …) return prev + pageSize

return prev
})

setLimit(prev => {
 if (lastItem.pageIndex …) return prev + pageSize

return prev
})

But why not use the useInfiniteQuery which provided a fetchNextPage? Is useQuery from Tanstack query or your own implementation?

kenpachiOP•2mo ago

actually usequery is from rocicorp/zero sync engine, on initial load the feedbacks() is an empty array but it gets updated and i have no clue why the count in createVirtualizer isnt reacting to the changes it saves the inital empty array as count and never gets updated and with creatememo i am recreating it everytime the feedbacks() limit is updated

Madaxen86•2mo ago

just a few issues I spotted and (Zulu): 1. Don't destructure props (as in FeedbackList) in Solid as this will break reactivity. 2. don't put createVirtual inside a function or createMemo as it will recreate it over and over when a signal changes. That's not what this primitive expects 3.. If you want to pass around refs in Solid you better use a signal

 const [parentRef,setParentRef] = createSignal<HTMLDivElement>();
 const virtual = createVirtual({
    getScrollElement:parentRef,
    
 })
 return <div ref={setParentRef}> ...

 const [parentRef,setParentRef] = createSignal<HTMLDivElement>();
 const virtual = createVirtual({
    getScrollElement:parentRef,
    
 })
 return <div ref={setParentRef}> ...

4. about rocicorp/zero - in their docs there is a createQuery - is useQuery a custom wrapper? And just an additional thought: As Solid is very perfomant out of the box, have you tried without virtualization? I'll see if I find some time tomorrow to experiment with tanstack virtual a little bit.

kenpachiOP•2mo ago

Thanks for the insight, I am not sure if it is a tanstack virtual bug because it is not tracking the changes. Transitioning from react to solidjs is fun but it will take some time to separate the react pattern and the solidjs way. I have been trying to recreate this page infinite scroll method with the virtualization https://github.com/rocicorp/mono/blob/main/apps/zbugs/src/pages/list/list-page.tsx I am using virtualization because I might list records varying from 2k-4k , Also rocicorp/zero deprecated createQuery for useQuery I think it is just naming convention and add ZeroProvider just to stick to the same naming convention as react

GitHub

mono/apps/zbugs/src/pages/list/list-page.tsx at main · rocicorp/mono

99% of Queries in Zero Milliseconds. Contribute to rocicorp/mono development by creating an account on GitHub.

Madaxen86•2mo ago

I experimented a little bit with ts virtual. I found this example implementation which helps a ton to understand how to use it: https://github.com/crabnebula-dev/devtools/blob/b34c10993415701de881bef06c3f4eeba655c0a3/clients/web/src/components/virtual-list.tsx

GitHub

devtools/clients/web/src/components/virtual-list.tsx at b34c1099341...

Inspect and Debug your Tauri applications in style 💃 - crabnebula-dev/devtools

Madaxen86•2mo ago

Especially how to handle dynamic count.

Gaming

Programming

Tanstack virtual

Did you find this page helpful?