AI Prompt to Build a React Infinite Scroll List With Virtualization
This prompt is for developers who need a React infinite scroll list that stays fast even with thousands of rows, by combining lazy-loaded pagination with list virtualization so only the visible rows are ever rendered to the DOM. It's written for anyone using ChatGPT, Claude, or Gemini to scaffold a feed, search results page, or data-heavy list component without writing the scroll-detection and windowing logic from scratch.
A plain infinite scroll implementation that just appends more items to the DOM works fine for a few hundred rows, but it slows down badly once a list grows into the thousands, because the browser still has to lay out and paint every row that's ever been loaded. Virtualization fixes this by only mounting the rows currently in or near the viewport and swapping them out as the user scrolls, while a separate pagination layer fetches new pages of data before the user hits the bottom. The prompt asks the model to produce both pieces together: the data-fetching hook and the virtualized rendering layer, so they stay in sync instead of fighting each other.
Once you have a working version, it's worth running the generated code through a pass that trims unnecessary verbosity, especially if you're pasting large component files back into follow-up prompts. The Token Optimizer can compress a bulky prompt or long code block before you reuse it in later iterations.
Prompt template
Want it sharper? Optimize this prompt with Prompt Optimizer, check it with the Prompt Debugger or shorten it with the Token Optimizer.
Example input
When to use it
- You're building a feed, search results list, or table that could grow into the thousands of rows
- Users on lower-end devices are reporting lag or jank when scrolling through a long list
- You're already fetching paginated data from an API and need the rendering layer to keep up without loading everything at once
- You want to avoid hand-rolling scroll-position math and intersection observers from scratch
Best practices
- Separate the data-fetching logic (which page is next, loading state, error state) from the rendering logic (which rows are currently visible) so each can be tested and reused independently
- Use a windowing approach that renders a small buffer of off-screen rows above and below the viewport, rather than rendering only exactly what's visible, to avoid blank flashes during fast scrolling
- Specify an approximate or measured row height up front, since most virtualization approaches need this to calculate scroll position accurately
- Ask for loading skeletons or placeholders for in-flight pages instead of a blank gap, so the list doesn't visibly jump as new data arrives
Common mistakes
- Appending every fetched page directly to the DOM without virtualization, which works at first but degrades badly as the list grows
- Triggering the next page fetch only when the user reaches the very last pixel of the list, instead of a bit before it, causing a visible loading stall
- Using a fixed row height in the virtualization math when rows actually vary in height, which causes jumpy scrolling and misaligned items
- Forgetting to handle the empty state and the end-of-list state, leaving the component stuck showing a loading spinner forever
FAQs
What is list virtualization in React?
List virtualization is a rendering technique where only the rows currently visible in (or near) the viewport are mounted to the DOM, while the rest stay unrendered until the user scrolls to them, keeping long lists fast.
How is infinite scroll different from virtualization?
Infinite scroll is about fetching more data as the user nears the bottom of a list. Virtualization is about rendering performance once that data is loaded. A large list usually needs both working together, since infinite scroll alone can still slow the page down once thousands of rows are in the DOM.
Do I need a library for this, or can I build it from scratch?
You can build a basic version from scratch for learning or simple cases, but for production apps with large or variable-height lists, a dedicated virtualization library is usually more reliable than hand-rolled windowing math.
Which Cuelara tool helps me clean up this generated code?
Token Optimizer — compresses a long prompt or bulky generated component before you paste it into a follow-up prompt, cutting unnecessary tokens without losing the logic.