facebook/react · error · Error

Invalid hook call. Hooks can only be called inside of the bo

Error message

Invalid hook call. Hooks can only be called inside of the body of a function component.

What it means

Fizz's useId reads the per-request ResumableState to build an id. When currentResumableState is null there is no active SSR render pass, so React rejects the call with the generic invalid-hook-call message: the hook ran outside the body of a function component being rendered by this renderer.

Source

Thrown at packages/react-server/src/ReactFizzHooks.js:809

    // This is not a server action, so the implementation is much simpler.

    // Bind the state to the first argument of the action.
    const boundAction = action.bind(null, initialState);
    // Wrap the action so the return value is void.
    const dispatch = (payload: P): void => {
      boundAction(payload);
    };
    return [initialState, dispatch, false];
  }
}

function useId(): string {
  const task: Task = currentlyRenderingTask as any;
  const treeId = getTreeId(task.treeContext);

  const resumableState = currentResumableState;
  if (resumableState === null) {
    throw new Error(
      'Invalid hook call. Hooks can only be called inside of the body of a function component.',
    );
  }

  const localId = localIdCounter++;
  return makeId(resumableState, treeId, localId);
}

function use<T>(usable: Usable<T>): T {
  // $FlowFixMe[invalid-compare]
  if (usable !== null && typeof usable === 'object') {
    // $FlowFixMe[method-unbinding]
    if (typeof usable.then === 'function') {
      // This is a thenable.
      const thenable: Thenable<T> = usable as any;
      return unwrapThenable(thenable);
    } else if (usable.$$typeof === REACT_RECOVERABLE_TYPE) {
      // Create the recoverable error here so its stack captures the component

View on GitHub (pinned to eafeac097b)

Solutions

1. Move the useId call to the top level of a function component and call it unconditionally
2. Run npm ls react react-dom to find duplicate React copies, then dedupe and align versions
3. Import hooks from 'react' only and make sure react and react-dom versions match

Example fix

// before
const makeId = () => useId(); // called outside a component render -> throws
export function Label() { return <label htmlFor={makeId()} />; }

// after
export function Label() {
  const id = useId(); // top level of the component body
  return <label htmlFor={id} />;
}

When it happens

Trigger: Calling React.useId() from a plain function, class, or callback while code executes on the server; invoking the hook after the SSR pass finished; running with two copies of React or a renderer entrypoint that never installs the Fizz render state.

Common situations: Broken Rules of Hooks; duplicate react/react-dom installs caused by bundler aliasing or npm linking; version mismatch between react and react-dom; hooks imported from renderer internals instead of the 'react' package.

Related errors

• Invalid hook call. Hooks can only be called inside of the bo
• Rendered more hooks than during the previous render
• react-cache: read and preload may only be called from within
• File/Blob fields are not yet supported in progressive forms.
• Can only set one of `children` or `props.dangerouslySetInner

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