React 19: Component suspended while responding to synchronous input

Error: A component suspended while responding to synchronous input. This can cause a UI waterfall. Consider wrapping the component in <Suspense>. at ComponentThatSuspends (app/page.js:10:5)

Immediate Remediation

jsx

import { Suspense } from 'react';

function App() {
  return (
    <Suspense fallback={<Loading />}>
      <ComponentThatSuspends />
    </Suspense>
  );
}

Root Cause Analysis

A component used a suspending resource (e.g., use() or a data fetching library) during a synchronous update without a Suspense boundary, causing React to warn about the potential UI waterfall.

Verification & Guardrails

Wrap the suspending component in a <Suspense> boundary.
If the suspension is triggered by an event handler, use startTransition to mark it as a transition.
This is a development warning but can lead to runtime issues if ignored.

Have a custom or uncategorized crash?

Run your trace through our in-memory client privacy sandbox for instant SRE remediation.

Open Diagnostic Studio