marmelab/react-admin · error · Error

useListPaginationContext must be used inside a ListPaginatio

Error message

useListPaginationContext must be used inside a ListPaginationContextProvider

What it means

useListPaginationContext reads ListPaginationContext, populated only by ListPaginationContextProvider inside list controllers. Called elsewhere, the context is undefined and the hook throws to fail fast.

Source

Thrown at packages/ra-core/src/controller/list/useListPaginationContext.ts:21

import {
    ListPaginationContext,
    ListPaginationContextValue,
} from './ListPaginationContext';

/**
 * Hook to read the list pagination controller props from the ListPaginationContext.
 *
 * Must be used within a <ListPaginationContext> (e.g. as a descendent of <List>
 * or <ListBase>).
 *
 * @returns {ListPaginationContextValue} list controller props
 *
 * @see useListController for how it is filled
 */
export const useListPaginationContext = (): ListPaginationContextValue => {
    const context = useContext(ListPaginationContext);
    if (!context) {
        throw new Error(
            'useListPaginationContext must be used inside a ListPaginationContextProvider'
        );
    }
    return context;
};

View on GitHub (pinned to 051f511bb0)

Solutions

  1. Render the pagination component inside a <List> (or ListContextProvider-backed tree)
  2. In tests, wrap with ListPaginationContextProvider with page/perPage/setPage values
  3. Pass page/perPage callbacks as props when the component is used standalone

Example fix

// before
export const StandalonePager = () => {
  const { page } = useListPaginationContext(); // throws
};
// after
<List perPage={25}>
  <StandalonePager />
</List>
Defensive patterns

Strategy: try-catch

Validate before calling

const ctx = useContext(ListPaginationContext);
if (!ctx) return <StaticPagination page={1} />;

Type guard

const hasPaginationContext = (): boolean => useContext(ListPaginationContext) !== null;

Try / catch

try { render(<Pagination />); } catch (e) { if (String(e).includes('useListPaginationContext')) { /* nest inside List */ } }

Prevention

When it happens

Trigger: Calling useListPaginationContext in a component not nested under <List>/a manual <ListPaginationContextProvider value={...}> — e.g. custom pagination used on a standalone page.

Common situations: Reusing the default Pagination component outside a list; tests without the provider; components moved out of a List after refactoring.

Related errors


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