facebook/react · error · Error

373

373

Error message

This Hook is not supported in Server Components.

What it means

The RSC (Flight) hook dispatcher implements only server-safe hooks: use, useCallback, useMemo, useId, useContext (server contexts), useDebugValue, useMemoCache, and useCacheRefresh. Stateful and interactive hooks — useState, useReducer, useRef, useEffect, useLayoutEffect, useInsertionEffect, useImperativeHandle, useDeferredValue, useTransition, useSyncExternalStore, useActionState/useFormState, useOptimistic, useEffectEvent, useHostTransitionStatus — all throw via unsupportedHook (error code 373).

Source

Thrown at packages/react-server/src/ReactFlightHooks.js:107

  useHostTransitionStatus: unsupportedHook as any,
  useFormState: unsupportedHook as any,
  useActionState: unsupportedHook as any,
  useOptimistic: unsupportedHook as any,
  useMemoCache(size: number): Array<any> {
    const data = new Array<any>(size);
    for (let i = 0; i < size; i++) {
      data[i] = REACT_MEMO_CACHE_SENTINEL;
    }
    return data;
  },
  useCacheRefresh(): <T>(?() => T, ?T) => void {
    return unsupportedRefresh;
  },
  useEffectEvent: unsupportedHook as any,
};

function unsupportedHook(): void {
  throw new Error('This Hook is not supported in Server Components.');
}

function unsupportedRefresh(): void {
  throw new Error(
    'Refreshing the cache is not supported in Server Components.',
  );
}

function unsupportedContext(): void {
  throw new Error('Cannot read a Client Context from a Server Component.');
}

function useId(): string {
  if (currentRequest === null) {
    throw new Error('useId can only be used while React is rendering');
  }
  const id = currentRequest.identifierCount++;
  // use 'S' for Flight components to distinguish from 'R' and 'r' in Fizz/Client

View on GitHub (pinned to eafeac097b)

Solutions

1. Add 'use client' as the very first statement of the file that uses stateful or interactive hooks
2. Split the interactive part into its own client component and render it from the server component
3. If the logic must stay on the server, replace the hook with a server-safe pattern: props, await, cache(), or use()

Example fix

// before (server component by default)
export function Counter() {
  const [n, setN] = useState(0); // throws in a Server Component
  return <button onClick={() => setN(n + 1)}>{n}</button>;
}

// after: Counter.js
'use client';
export function Counter() {
  const [n, setN] = useState(0);
  return <button onClick={() => setN(n + 1)}>{n}</button>;
}

When it happens

Trigger: Calling any of those hooks in a module React renders as a Server Component — a file without the 'use client' directive — including hooks reached through imports from shared hook libraries.

Common situations: Adding interactivity to a file the framework renders on the server (Next.js app router defaults pages/layouts to server components); importing a hook library not marked as client code; forgetting the 'use client' directive at the top of an interactive component.

Related errors

• Hooks are not supported inside an async component. This erro
• 502
• An unknown Component is an async Client Component. Only Serv
• Attempted to call the default export of ${url} from the serv
• Attempted to call ${name}() from the server but ${name} is o

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