Load more with useInfiniteQuery, and coming back to the same place
Three pages are loaded, the feed is scrolled to 600px and a post is opened (the Feed unmounts). After Back, the 30 posts come from the cache (still 3 fetches) and the scroll position is restored before paint.
Long collections arrive in pages: numbered pagination, a Load more button, or infinite scroll that fetches the next page when an invisible sentinel element comes into view; doing it right means cursors instead of offsets, one request at a time, de-duplication, an end state, retry on errors and bringing users back to the same place.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 6 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write appendUnique(oldItems, newItems) that appends without duplicate ids and keeps the old order.
Change the first example to a Load more button instead of a sentinel (keep the guard, end and retry).
Explain it without notes
Compare offset and cursor pagination. When would you choose each?
How do you implement infinite scroll without listening to scroll events?
List the bugs a naive infinite scroll has and how to prevent each.
When should a product use numbered pagination instead of infinite scroll?
Preview
Console
Nothing logged yet.Expected console output
Before: 30 posts, scrollTop 600, fetches 3
After back: 30 posts, scrollTop 600, fetches 3