Infinite Scroll

Load paginated data in response to user scroll interactions

An infinitely scrolling UI is now an expected feature in many content-driven apps. Thanks to Convex paginated queries and client-side pagination helpers like the 'usePaginatedQuery' React hook, implementing a reactively-updating infinite-scroll UI is no longer a big lift. By combining paginated queries with client-side scroll detection (using the Intersection Observer API, say), you can support this UI paradigm in any Convex app.

Resources

📄DOCS

Learn how to implement infinite scroll with Paginated Queries

docs.convex.dev/database/pagination

💡BLOG

Deep dive: How Convex supports fully reactive pagination

stack.convex.dev/fully-reactive-pagination

💡BLOG

How to manage intermediary loading states when reactively paginating data

stack.convex.dev/help-my-app-is-overreacting

💻CODE

A React hook for paginating through a Convex paginated query result one page at a time.