Warning: A component suspended while responding to synchronous input

What causes this error

Certain updates — typing into a controlled input, for example — are treated as urgent and synchronous by default, so React expects them to resolve immediately without triggering a Suspense fallback. If that update causes a child to suspend (waiting on data via the use hook, or a lazily-loaded component), React warns because forcing a fallback mid-keystroke is a poor experience it wants you to explicitly opt into or avoid.

The Fix

import { startTransition, useState } from 'react';

function SearchBox() {
  const [query, setQuery] = useState('');

  function handleChange(e) {
    const value = e.target.value;
    // Mark the state update that leads to suspending as non-urgent
    startTransition(() => {
      setQuery(value);
    });
  }

  return <input onChange={handleChange} />;
}

Wrapped in startTransition, React keeps showing the old results while the new data loads, instead of yanking in a Suspense fallback on every keystroke.

Common causes / variations

• A search-as-you-type input whose results component reads async data with `use()` directly from the change handler's state
• A tab/filter toggle that triggers a suspending child without being wrapped in a transition
• Not using `useDeferredValue` for a value that feeds a suspending child, where a transition isn't otherwise available

Related errors

See also: Too many re-renders, useOptimistic reverting early.