{"record":{"id":"3659c7300bcb8abb","repo":"marmelab/react-admin","slug":"infinitepagination-must-be-used-inside-an-infinite","errorCode":null,"errorMessage":"InfinitePagination must be used inside an InfinitePaginationContext, usually created by <InfiniteList>. You cannot use it as child of a <List> component.","messagePattern":"InfinitePagination must be used inside an InfinitePaginationContext, usually created by <InfiniteList>\\. You cannot use it as child of a <List> component\\.","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/ra-ui-materialui/src/list/pagination/InfinitePagination.tsx","lineNumber":38,"sourceCode":" *    <InfiniteList pagination={<InfinitePagination sx={{ py: 5 }} />}>\n *       <Datagrid>\n *          <TextField source=\"id\" />\n *         <TextField source=\"title\" />\n *      </Datagrid>\n *   </InfiniteList>\n * );\n */\nexport const InfinitePagination = ({\n    offline = defaultOffline,\n    options = defaultOptions,\n    sx,\n}: InfinitePaginationProps) => {\n    const { isPaused, isPending } = useListContext();\n    const { fetchNextPage, hasNextPage, isFetchingNextPage } =\n        useInfinitePaginationContext();\n\n    if (!fetchNextPage) {\n        throw new Error(\n            'InfinitePagination must be used inside an InfinitePaginationContext, usually created by <InfiniteList>. You cannot use it as child of a <List> component.'\n        );\n    }\n\n    const [hasRequestedNextPage, setHasRequestedNextPage] =\n        React.useState(false);\n    const observerElem = useRef(null);\n    const handleObserver = useEvent<[IntersectionObserverEntry[]], void>(\n        entries => {\n            const [target] = entries;\n            if (target.isIntersecting && hasNextPage && !isFetchingNextPage) {\n                setHasRequestedNextPage(true);\n                fetchNextPage();\n            }\n        }\n    );\n\n    useEffect(() => {","sourceCodeStart":20,"sourceCodeEnd":56,"githubUrl":"https://github.com/marmelab/react-admin/blob/051f511bb0afb5ea565c2d3728bf4dab0a6fa5e0/packages/ra-ui-materialui/src/list/pagination/InfinitePagination.tsx#L20-L56","documentation":"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.","triggerScenarios":"Using <InfinitePagination> as (or within) the pagination of a <List> instead of <InfiniteList>, or rendering it without any infinite list context.","commonSituations":"Swapping Pagination for InfinitePagination to get infinite scroll without switching the parent List to InfiniteList.","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."],"exampleFix":"// before\n<List pagination={<InfinitePagination />}>...\n// after\n<InfiniteList pagination={<InfinitePagination />}>...","handlingStrategy":"validation","validationCode":"const { fetchNextPage } = useInfinitePaginationContext();\nif (!fetchNextPage) return null; // not inside InfiniteList","typeGuard":"const inInfiniteContext = (c: ReturnType<typeof useInfinitePaginationContext>): c is { fetchNextPage: Function } => typeof c.fetchNextPage === 'function';","tryCatchPattern":"try { renderPagination(); } catch (e) { if (String(e).includes('InfinitePagination must be used')) return <Pagination />; throw e; }","preventionTips":["Pair InfinitePagination only with <InfiniteList>.","Use <Pagination> with plain <List>.","Check useInfinitePaginationContext() before rendering custom pagination."],"tags":["react-admin","missing-context","infinite-list"],"backgroundTag":"missing-context-provider","analyzedSha":"051f511bb0afb5ea565c2d3728bf4dab0a6fa5e0","analyzedAt":"2026-08-30T02:28:14.926Z","schemaVersion":2},"datasetVersion":"2026-08-30T03:17:51.788Z"}