Expert60 min read

Concurrent Rendering and Suspense

Deep dive into React's concurrent features, Suspense boundaries, and how React prioritizes updates.

Topics Covered:

Concurrent ModeSuspenseTime SlicingPriority Updates

Prerequisites:

Building Custom Hooks

Overview

React 18 introduced concurrent rendering, allowing React to interrupt, pause, and resume rendering work. This makes UIs more responsive.

What is Concurrent Rendering?

Concurrent rendering allows React to work on multiple versions of your UI simultaneously. React can pause rendering to handle urgent updates, then continue.

Suspense Boundaries

Suspense lets components 'wait' for something before rendering. It's commonly used for code splitting and data fetching.

Code Example:

import { Suspense } from 'react';

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

If ProfilePage suspends (waits for data), Suspense shows the fallback. Once ready, it shows ProfilePage.

useTransition for Non-Urgent Updates

useTransition lets you mark updates as non-urgent, allowing React to keep the UI responsive.

Code Example:

const [isPending, startTransition] = useTransition();

function handleInput(e) {
  setInputValue(e.target.value); // Urgent
  startTransition(() => {
    setSearchResults(search(e.target.value)); // Non-urgent
  });
}

Urgent updates (typing) happen immediately. Non-urgent updates (search results) can be interrupted for urgent ones.

Conclusion

Concurrent features make React apps feel faster and more responsive. Use them strategically for better UX.