# Pagination and infinite scroll \[Load and append pages into one normalized list]
Load a list one page at a time and append each page into a single growing list, with every
row normalized like any other entity. [`useStatePagedData`](/react/use-state-paged-data) owns the
whole flow: page 0 is fetched, cached, and SSR'd through `useStateData`, while `loadMore()`
fetches later pages and appends them for you.
The cursor is **view state**, not entity data; it tells you where to resume, so it lives in the
hook (derived by `getCursor`), outside the normalized store.
For a runnable version of everything below — an infinite list with a Load-more button, an
infinite-scroll sentinel, and streaming SSR — see the
[vite-ssr-pagination example](/examples#vite-ssr-pagination).
## Page with `useStatePagedData`
Give the hook the `model` to page (the list is always `array(model)`), a `fetchPage` (fetch one
page for a cursor), a `getCursor` (where to resume — it receives the current `ids: string[]`), and
a `select` (the entities a page contributes, appended to the list). Page 0 is just
`select(firstPage)`, so it goes through `useStateData`'s cache / SSR path unchanged. Each later
page does O(page-size) work — the rows already loaded are never re-normalized.
```tsx
import { useMemo } from "react";
import { useStatePagedData, Pending } from "rxfy-react";
import { FeedItemModel } from "./feed";
import { api } from "./api";
function Feed() {
const params = useMemo(() => ({ filter: "all" as const }), []);
const { data$, loadMore, isLoading, hasMore } = useStatePagedData({
model: FeedItemModel,
key: "feed",
params,
// Offset cursor = number of rows already loaded. Page 0 gets cursor 0.
fetchPage: ({ cursor, params }) => api.feed({ ...params, offset: cursor }),
getCursor: ({ ids }) => ids.length,
select: ({ page }) => page.items,
hasMore: ({ page }) => page.items.length > 0,
});
return (
Loading…}>
{(ids) => (
<>
{ids.map((id) => )}
{hasMore && (
)}
)}
);
}
```
`data$` emits a flat `string[]` of ids, so each page's new ids append to the list while the row
data lives in the `FeedItemModel` store. A row that appears on two pages (a duplicate the server
returned) still resolves to one shared entity cell. `loadMore` guards against overlapping calls
and becomes a no-op once `hasMore` returns `false`.
## Cursor strategies
`getCursor` returns whatever your API needs; its type is inferred as `TCursor` and flows into
`fetchPage`.
* **Offset** — `getCursor: ({ ids }) => ids.length`. Hydration-safe: it doesn't depend on
page 0 re-running on the client.
* **Page number** — `getCursor: ({ pageIndex }) => pageIndex` (page 0 fetched as index 0, the
first `loadMore` as index 1, …).
* **Opaque token** — return a token your API gave you. If the token lives on an entity field
(keyset pagination), `getCursor` only sees ids, not entities — drop down to `useStateData` +
manual `set` for that case.
## Drive it from a scroll sentinel
Swap the button for an `IntersectionObserver` to load the next page as the user reaches the
bottom:
```tsx
import { useEffect, useRef } from "react";
function LoadMoreSentinel({ onVisible }: { onVisible: () => void }) {
const ref = useRef(null);
useEffect(() => {
const el = ref.current;
if (!el) return;
const io = new IntersectionObserver(([entry]) => {
if (entry.isIntersecting) onVisible();
});
io.observe(el);
return () => io.disconnect();
}, [onVisible]);
return ;
}
```
Render ` loadMore()} />` after the list. No overlap guard is
needed — `loadMore` ignores calls made while a page is already in flight.
## Notes
* **Keep the cursor out of `params`.** The cursor is derived by `getCursor`, not a `useStateData`
param. If it were a param, each page would be a separate cached query and replace the previous
list instead of extending it. Stable `params` is what accumulates one list.
* **A new filter resets the list.** Changing `params` (a different `filter`) starts a fresh query —
the hook resets pagination and refetches page 0 of the new filter automatically.
* **Reloading.** `reload()` re-fetches the first page only and resets pagination. To restore a
deep scroll position after a reload, re-run your `loadMore` calls.
* **Need full control?** For anything `useStatePagedData` can't express (keyset cursors over
entity fields, prepending, bidirectional paging), use [`useStateData`](/react/use-state-data)
directly and append pages with `set((prev) => …)`.