{"record":{"id":"7be0847126a6ff4c","repo":"facebook/react","slug":"context-can-only-be-read-while-react-is-rendering","errorCode":null,"errorMessage":"Context can only be read while React is rendering. In classes, you can read it in the render method or getDerivedStateFromProps. In function components, you can read it directly in the function body, but not inside Hooks like useReducer() or useMemo().","messagePattern":"Context can only be read while React is rendering\\. In classes, you can read it in the render method or getDerivedStateFromProps\\. In function components, you can read it directly in the function body, but not inside Hooks like useReducer\\(\\) or useMemo\\(\\)\\.","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/react-reconciler/src/ReactFiberNewContext.js","lineNumber":597,"sourceCode":"\nfunction readContextForConsumer<T>(\n  consumer: Fiber | null,\n  context: ReactContext<T>,\n): T {\n  // $FlowFixMe[constant-condition]\n  const value = isPrimaryRenderer\n    ? context._currentValue\n    : context._currentValue2;\n\n  const contextItem = {\n    context: context as any as ReactContext<mixed>,\n    memoizedValue: value,\n    next: null,\n  };\n\n  if (lastContextDependency === null) {\n    if (consumer === null) {\n      throw new Error(\n        'Context can only be read while React is rendering. ' +\n          'In classes, you can read it in the render method or getDerivedStateFromProps. ' +\n          'In function components, you can read it directly in the function body, but not ' +\n          'inside Hooks like useReducer() or useMemo().',\n      );\n    }\n\n    // This is the first dependency for this component. Create a new list.\n    // $FlowFixMe[incompatible-type]\n    lastContextDependency = contextItem;\n    consumer.dependencies = __DEV__\n      ? // $FlowFixMe[incompatible-type]\n        {\n          lanes: NoLanes,\n          firstContext: contextItem,\n          _debugThenableState: null,\n        }\n      : // $FlowFixMe[incompatible-type]","sourceCodeStart":579,"sourceCodeEnd":615,"githubUrl":"https://github.com/facebook/react/blob/eafeac097ba51e1eab809c07102126bd5f8e5425/packages/react-reconciler/src/ReactFiberNewContext.js#L579-L615","documentation":"readContextForConsumer records a context dependency on the consumer fiber. It throws when there is no current dependency list (lastContextDependency null) AND the consumer fiber is null — meaning the context read happened while React was not rendering that component at all. Context is only readable during render: class render/getDerivedStateFromProps, or the function component body.","triggerScenarios":"A context read (via React's internal readContext, or a use()/context consumer invoked late) executed outside the render phase: inside a reducer or dispatch callback that runs in an event handler, in a class constructor or non-render lifecycle method, or from a library calling readContext from __SECRET_INTERNALS outside rendering.","commonSituations":"Older third-party libraries (routing, data layers) reading context through React internals outside render; refactoring render code into helpers that are invoked later from callbacks; capturing a context-consuming function and calling it in an event handler or subscription.","solutions":["Read context in the component body (or class render/getDerivedStateFromProps) and pass the value down or close over it","In class components use static contextType / static contextType + this.context inside render, not constructor/lifecycle","If a callback needs context data, pass the value in as an argument captured during render","Upgrade libraries that read context via internals to versions using the public context API"],"exampleFix":"// before — reducer reads context when dispatched (outside render)\nconst [state, dispatch] = useReducer(\n  (s, a) => ({...s, theme: readTheme()}), // readTheme = internal readContext\n  initial,\n);\n\n// after — capture context during render, close over it\nfunction Panel() {\n  const theme = useContext(ThemeContext);\n  const [state, dispatch] = useReducer(\n    (s, a) => ({...s, theme}),\n    initial,\n  );\n}","handlingStrategy":"validation","validationCode":null,"typeGuard":null,"tryCatchPattern":null,"preventionTips":["Read context only during render (component body; class render/getDerivedStateFromProps)","Capture the context value in the component body and pass it into callbacks/reducers as an argument","In classes use static contextType or this.context inside render — never constructor or other lifecycles","Upgrade libraries that read context through React internals to public-API versions"],"tags":["react","context","read-context","render-phase","internals"],"backgroundTag":"context-read-outside-render","analyzedSha":"eafeac097ba51e1eab809c07102126bd5f8e5425","analyzedAt":"2026-08-21T22:01:08.818Z","schemaVersion":2},"datasetVersion":"2026-08-21T23:17:16.201Z"}