{"record":{"id":"0a8854e36159d3ec","repo":"marmelab/react-admin","slug":"uselistcontext-must-be-used-inside-a-listcontextpr","errorCode":null,"errorMessage":"useListContext must be used inside a ListContextProvider","messagePattern":"useListContext must be used inside a ListContextProvider","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/ra-core/src/controller/list/useListContext.ts","lineNumber":69,"sourceCode":" *                     </Button>\n *                 }\n *                 {page !== nbPages &&\n *                     <Button color=\"primary\" key=\"next\" onClick={() => setPage(page + 1)}>\n *                         Next\n *                         <ChevronRight />\n *                     </Button>\n *                 }\n *             </Toolbar>\n *     );\n * }\n */\nexport const useListContext = <\n    RecordType extends RaRecord = any,\n    ErrorType = Error,\n>(): ListControllerResult<RecordType, ErrorType> => {\n    const context = useContext(ListContext);\n    if (!context) {\n        throw new Error(\n            'useListContext must be used inside a ListContextProvider'\n        );\n    }\n    return context as ListControllerResult<RecordType, ErrorType>;\n};\n","sourceCodeStart":51,"sourceCodeEnd":75,"githubUrl":"https://github.com/marmelab/react-admin/blob/051f511bb0afb5ea565c2d3728bf4dab0a6fa5e0/packages/ra-core/src/controller/list/useListContext.ts#L51-L75","documentation":"useListContext reads React context that only ListContextProvider (used internally by List, DataTable, etc.) provides. Without a provider, the context is undefined and the hook throws instead of returning garbage.","triggerScenarios":"Calling useListContext in a component rendered outside <List>, <ListContextProvider>, or <DataTable> roots — e.g. a custom page or a child that skips the provider.","commonSituations":"Custom row/dialog components placed outside the list; rendering list children in tests without wrapping in ListContextProvider; refactored components moved out of a List page.","solutions":["Render the consuming component inside <List> or <ListContextProvider value={controllerResult}>","In tests, wrap with a ListContextProvider supplying the needed value","If only partial state is needed, use the specific hooks with their own providers, or pass props directly","Pass list state via props instead of context for detached components"],"exampleFix":"// before\nexport const MyWidget = () => {\n  const { data } = useListContext(); // throws\n  ...\n};\n// after\nconst ListPage = () => (\n  <List>\n    <MyWidget />\n  </List>\n);","handlingStrategy":"try-catch","validationCode":"const ctx = useContext(ListContext);\nif (!ctx) {\n  // render fallback instead of calling the hook's throwing path\n  return <FallbackList />;\n}","typeGuard":"const inListContext = (): boolean => useContext(ListContext) !== null;","tryCatchPattern":"try { render(<MyListChild />); } catch (e) { if (String(e).includes('useListContext')) { /* wrap in ListContextProvider */ } }","preventionTips":["Only call useListContext in components mounted under <List> or ListContextProvider","In tests, create a renderWithListContext helper wrapping the provider","Prefer prop drilling when a component must work both inside and outside lists"],"tags":["react-admin","react-context","missing-provider"],"backgroundTag":"hook-called-outside-provider","analyzedSha":"051f511bb0afb5ea565c2d3728bf4dab0a6fa5e0","analyzedAt":"2026-08-30T02:28:14.926Z","schemaVersion":2},"datasetVersion":"2026-08-30T03:17:51.788Z"}