What causes "InfinitePagination must be used inside an InfinitePaginationContext, usually created by . You cannot use it as child of a component." in marmelab/react-admin?

Replace with so the InfinitePaginationContext is created.

marmelab/react-admin · error · Error

InfinitePagination must be used inside an InfinitePagination

Error message

InfinitePagination must be used inside an InfinitePaginationContext, usually created by <InfiniteList>. You cannot use it as child of a <List> component.

What it means

InfinitePagination drives infinite scrolling and needs fetchNextPage/hasNextPage from the InfinitePaginationContext, which only <InfiniteList> provides. When used inside a regular <List> (or standalone), fetchNextPage is undefined and the component throws.

Source

Thrown at packages/ra-ui-materialui/src/list/pagination/InfinitePagination.tsx:38

 *    <InfiniteList pagination={<InfinitePagination sx={{ py: 5 }} />}>
 *       <Datagrid>
 *          <TextField source="id" />
 *         <TextField source="title" />
 *      </Datagrid>
 *   </InfiniteList>
 * );
 */
export const InfinitePagination = ({
    offline = defaultOffline,
    options = defaultOptions,
    sx,
}: InfinitePaginationProps) => {
    const { isPaused, isPending } = useListContext();
    const { fetchNextPage, hasNextPage, isFetchingNextPage } =
        useInfinitePaginationContext();

    if (!fetchNextPage) {
        throw new Error(
            'InfinitePagination must be used inside an InfinitePaginationContext, usually created by <InfiniteList>. You cannot use it as child of a <List> component.'
        );
    }

    const [hasRequestedNextPage, setHasRequestedNextPage] =
        React.useState(false);
    const observerElem = useRef(null);
    const handleObserver = useEvent<[IntersectionObserverEntry[]], void>(
        entries => {
            const [target] = entries;
            if (target.isIntersecting && hasNextPage && !isFetchingNextPage) {
                setHasRequestedNextPage(true);
                fetchNextPage();
            }
        }
    );

    useEffect(() => {

View on GitHub (pinned to 051f511bb0)

Solutions

Replace <List> with <InfiniteList> so the InfinitePaginationContext is created.
Use <Pagination> (or no pagination) if staying on a regular List.
Render InfinitePagination only within InfiniteList's children.

Example fix

// before
<List pagination={<InfinitePagination />}>...
// after
<InfiniteList pagination={<InfinitePagination />}>...

Defensive patterns

Strategy: validation

Validate before calling

const { fetchNextPage } = useInfinitePaginationContext();
if (!fetchNextPage) return null; // not inside InfiniteList

Type guard

const inInfiniteContext = (c: ReturnType<typeof useInfinitePaginationContext>): c is { fetchNextPage: Function } => typeof c.fetchNextPage === 'function';

Try / catch

try { renderPagination(); } catch (e) { if (String(e).includes('InfinitePagination must be used')) return <Pagination />; throw e; }

Prevention

Pair InfinitePagination only with <InfiniteList>.
Use <Pagination> with plain <List>.
Check useInfinitePaginationContext() before rendering custom pagination.

When it happens

Trigger: Using <InfinitePagination> as (or within) the pagination of a <List> instead of <InfiniteList>, or rendering it without any infinite list context.

Common situations: Swapping Pagination for InfinitePagination to get infinite scroll without switching the parent List to InfiniteList.

Related errors

AI-assisted analysis of marmelab/react-admin@051f511bb0 (2026-08-30). Data as JSON: /api/errors/3659c7300bcb8abb. Report an issue: GitHub.