React | useTransition vs Suspense – same vibes, different jobs

At first glance, useTransition and Suspense both seem like they're about handling delays in React. But they actually serve quite different purposes. Here’s how I finally wrapped my head around them.

Simple examples

✅ useTransition – defer expensive state updates

tsx
const [isPending, startTransition] = useTransition();

const handleInput = (e) => {
  const value = e.target.value;
  setInput(value); // fast update

  startTransition(() => {
    // slow update – deprioritised
    setFilteredList(expensiveFilter(value));
  });
};

In this example, setInput happens immediately so the UI stays responsive. But the heavy filtering logic gets pushed to the background with startTransition.

✅ Suspense – show a fallback while something loads

tsx
const LazyComp = React.lazy(() => import('./HeavyComponent'));

return (
  <Suspense fallback={<div>Loading...</div>}>
    <LazyComp />
  </Suspense>
);

When the component is still loading, the fallback (Loading…) is shown instead of a blank screen. No need to manually manage loading state—React handles it.

💡 When to use what?

Use useTransition when your UI feels sluggish because a user action triggers something slow (e.g. typing in a search box that filters a huge list).

Use Suspense when you load components or data asynchronously, and you don’t want users staring at a blank screen while it loads.

🚀 Hope this makes things a bit clearer for someone else on the same journey.