facebook/react · error · Error

Context can only be read while React is rendering. In classe

Error message

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().

What it means

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.

Source

Thrown at packages/react-reconciler/src/ReactFiberNewContext.js:597

function readContextForConsumer<T>(
  consumer: Fiber | null,
  context: ReactContext<T>,
): T {
  // $FlowFixMe[constant-condition]
  const value = isPrimaryRenderer
    ? context._currentValue
    : context._currentValue2;

  const contextItem = {
    context: context as any as ReactContext<mixed>,
    memoizedValue: value,
    next: null,
  };

  if (lastContextDependency === null) {
    if (consumer === null) {
      throw new Error(
        '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().',
      );
    }

    // This is the first dependency for this component. Create a new list.
    // $FlowFixMe[incompatible-type]
    lastContextDependency = contextItem;
    consumer.dependencies = __DEV__
      ? // $FlowFixMe[incompatible-type]
        {
          lanes: NoLanes,
          firstContext: contextItem,
          _debugThenableState: null,
        }
      : // $FlowFixMe[incompatible-type]

View on GitHub (pinned to eafeac097b)

Solutions

1. Read context in the component body (or class render/getDerivedStateFromProps) and pass the value down or close over it
2. In class components use static contextType / static contextType + this.context inside render, not constructor/lifecycle
3. If a callback needs context data, pass the value in as an argument captured during render
4. Upgrade libraries that read context via internals to versions using the public context API

Example fix

// before — reducer reads context when dispatched (outside render)
const [state, dispatch] = useReducer(
  (s, a) => ({...s, theme: readTheme()}), // readTheme = internal readContext
  initial,
);

// after — capture context during render, close over it
function Panel() {
  const theme = useContext(ThemeContext);
  const [state, dispatch] = useReducer(
    (s, a) => ({...s, theme}),
    initial,
  );
}

When it happens

Trigger: 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.

Common situations: 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.

Related errors

• 440
• 502
• react-cache: read and preload may only be called from within
• An unsupported type was passed to use(): ${String(usable)}
• Unknown Fiber. Needs to be a function component to inspect h

AI-assisted analysis of facebook/react@eafeac097b (2026-08-21). Data as JSON: /api/errors/7be0847126a6ff4c. Report an issue: GitHub.