IH

Concurrent Mode and Suspense in React

What is Concurrent Mode?

Concurrent Mode is a set of features in React that help applications remain responsive and adjust to the user’s device capabilities and network speed. It allows React to work on multiple state updates concurrently, prioritize updates, and even interrupt rendering when necessary.

// Note: Concurrent Mode API has evolved into concurrent features
// This is a conceptual example of how it was initially introduced
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

// Enable Concurrent Mode
ReactDOM.createRoot(
  document.getElementById('root')
).render(<App />);

Key Concepts in Concurrent Rendering

1. Interruptible Rendering

Traditional React rendering is synchronous and uninterruptible. Once it starts rendering an update, it can’t be interrupted until the entire tree is processed. Concurrent Mode makes rendering interruptible:

function SearchResults({ query }) {
  const [results, setResults] = useState([]);
  
  useEffect(() => {
    // This could trigger a long render process
    fetchResults(query).then(data => {
      setResults(data);
    });
  }, [query]);
  
  // In Concurrent Mode, if the user types again before this
  // render completes, React can interrupt it to handle the new input
  return (
    <div>
      {results.map(result => (
        <ResultItem key={result.id} data={result} />
      ))}
    </div>
  );
}

2. Priority-Based Rendering

Concurrent Mode introduces the concept of priority for updates:

  • High priority: User interactions like typing, clicking, or scrolling
  • Low priority: Data fetching, code splitting, or non-urgent UI updates
function UserDashboard() {
  // High priority: Directly responds to user input
  const [searchQuery, setSearchQuery] = useState('');
  
  // Lower priority: Can be deferred if needed
  const [recommendations, setRecommendations] = useState([]);
  
  // React will prioritize updating the input field over
  // rendering the recommendations
  return (
    <div>
      <input 
        value={searchQuery}
        onChange={e => setSearchQuery(e.target.value)}
      />
      <RecommendationsList items={recommendations} />
    </div>
  );
}

3. Time Slicing

Time slicing allows React to split rendering work into chunks and spread it out over multiple frames, yielding to the main thread to keep the application responsive:

function LargeList({ items }) {
  // With time slicing, React can render this list
  // incrementally, yielding to browser for user events
  return (
    <ul>
      {items.map(item => (
        <ComplexListItem key={item.id} data={item} />
      ))}
    </ul>
  );
}

What is Suspense?

Suspense is a React feature that lets your components “wait” for something before they can render, showing a fallback UI during the waiting period. It was initially introduced for code splitting but has expanded to support data fetching and other asynchronous operations.

import React, { Suspense } from 'react';

// Component that will be loaded lazily
const HeavyComponent = React.lazy(() => import('./HeavyComponent'));

function App() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <HeavyComponent />
      </Suspense>
    </div>
  );
}

Suspense for Data Fetching

Suspense for data fetching allows components to “suspend” rendering while they wait for data to load:

import { Suspense } from 'react';
import { fetchProfileData } from './api';

// This resource pre-loads the data
const resource = fetchProfileData();

function ProfilePage() {
  return (
    <Suspense fallback={<h1>Loading profile...</h1>}>
      <ProfileDetails />
      <Suspense fallback={<h2>Loading posts...</h2>}>
        <ProfileTimeline />
      </Suspense>
    </Suspense>
  );
}

function ProfileDetails() {
  // Try to read user info, although it might not have loaded yet
  const user = resource.user.read();
  return <h1>{user.name}</h1>;
}

function ProfileTimeline() {
  // Try to read posts, although they might not have loaded yet
  const posts = resource.posts.read();
  return (
    <ul>
      {posts.map(post => (
        <li key={post.id}>{post.text}</li>
      ))}
    </ul>
  );
}

SuspenseList

SuspenseList helps coordinate multiple Suspense components by controlling their loading sequence:

import { Suspense, SuspenseList } from 'react';

function App() {
  return (
    <SuspenseList revealOrder="forwards" tail="collapsed">
      <Suspense fallback={<h2>Loading header...</h2>}>
        <Header />
      </Suspense>
      <Suspense fallback={<h2>Loading content...</h2>}>
        <Content />
      </Suspense>
      <Suspense fallback={<h2>Loading footer...</h2>}>
        <Footer />
      </Suspense>
    </SuspenseList>
  );
}

The revealOrder prop controls the order in which the Suspense children are revealed:

  • "forwards": Reveal in order, from first to last
  • "backwards": Reveal in order, from last to first
  • "together": Reveal all at once

The tail prop controls how the fallbacks are shown:

  • "collapsed": Only show the next fallback in the list
  • "hidden": Don’t show any fallbacks

useTransition Hook

The useTransition hook lets you mark state updates as transitions, which are treated as non-urgent and can be interrupted:

import { useState, useTransition } from 'react';

function SearchPage() {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState([]);
  const [isPending, startTransition] = useTransition();
  
  const handleChange = (e) => {
    const value = e.target.value;
    
    // Update the input immediately (high priority)
    setQuery(value);
    
    // Mark the search results update as a transition (lower priority)
    startTransition(() => {
      // This update can be interrupted if the user types again
      fetchResults(value).then(data => {
        setResults(data);
      });
    });
  };
  
  return (
    <div>
      <input value={query} onChange={handleChange} />
      
      {isPending ? (
        <div>Loading results...</div>
      ) : (
        <ul>
          {results.map(result => (
            <li key={result.id}>{result.text}</li>
          ))}
        </ul>
      )}
    </div>
  );
}

useDeferredValue Hook

The useDeferredValue hook lets you defer updating a part of the UI, similar to debouncing:

import { useState, useDeferredValue } from 'react';

function SearchResults({ query }) {
  // Create a deferred version of the query
  const deferredQuery = useDeferredValue(query);
  
  // This component will re-render with the deferred value
  // which may lag behind the actual query value
  return (
    <div>
      <p>Showing results for: {deferredQuery}</p>
      <ResultsList query={deferredQuery} />
    </div>
  );
}

function SearchPage() {
  const [query, setQuery] = useState('');
  
  return (
    <div>
      <input 
        value={query}
        onChange={e => setQuery(e.target.value)}
      />
      <SearchResults query={query} />
    </div>
  );
}

How Concurrent Features Improve Performance

1. Better User Experience During Loading

function ProductPage({ productId }) {
  return (
    <div>
      <Suspense fallback={<ProductSkeleton />}>
        <ProductDetails id={productId} />
      </Suspense>
      
      <Suspense fallback={<ReviewsSkeleton />}>
        <ProductReviews id={productId} />
      </Suspense>
      
      <Suspense fallback={<RelatedSkeleton />}>
        <RelatedProducts id={productId} />
      </Suspense>
    </div>
  );
}

Instead of showing a single loading spinner for the entire page, each section can load independently with its own fallback UI.

2. Avoiding Loading Spinners for Fast Operations

function FilterableList({ items }) {
  const [filter, setFilter] = useState('');
  const [isPending, startTransition] = useTransition();
  
  const handleFilterChange = (e) => {
    const value = e.target.value;
    
    // Update the input immediately
    setFilter(value);
    
    // Mark filtering as a transition
    startTransition(() => {
      // Even if filtering is expensive, the input remains responsive
      setFilteredItems(items.filter(item => 
        item.name.includes(value)
      ));
    });
  };
  
  return (
    <div>
      <input value={filter} onChange={handleFilterChange} />
      
      {isPending ? (
        <div>Updating list...</div>
      ) : (
        <ItemList items={filteredItems} />
      )}
    </div>
  );
}

3. Concurrent Data Fetching

function ProfilePage({ userId }) {
  return (
    <Suspense fallback={<FullPageSpinner />}>
      <ProfileHeader userId={userId} />
      
      <Suspense fallback={<PostsSkeleton />}>
        <ProfilePosts userId={userId} />
      </Suspense>
      
      <Suspense fallback={<FriendsSkeleton />}>
        <ProfileFriends userId={userId} />
      </Suspense>
    </Suspense>
  );
}

With this approach, all data fetching can happen in parallel, but the UI reveals in a controlled sequence.

Current Status and Adoption

It’s important to note that Concurrent Mode as a whole has evolved into individual concurrent features:

  1. React 18 introduced concurrent rendering as an opt-in feature
  2. Suspense is stable for code splitting and is being expanded for data fetching
  3. useTransition and useDeferredValue are stable hooks in React 18
  4. SuspenseList is still experimental

Best Practices

1. Use Suspense Boundaries Strategically

// BAD: Too many suspense boundaries
function ProductList({ products }) {
  return (
    <ul>
      {products.map(product => (
        <Suspense key={product.id} fallback={<Spinner />}>
          <ProductItem product={product} />
        </Suspense>
      ))}
    </ul>
  );
}

// GOOD: Suspense boundary at a logical UI section
function ProductList({ products }) {
  return (
    <Suspense fallback={<ProductListSkeleton />}>
      <ul>
        {products.map(product => (
          <ProductItem key={product.id} product={product} />
        ))}
      </ul>
    </Suspense>
  );
}

2. Design Components with Suspense in Mind

// Component designed for Suspense
function UserProfile({ userId }) {
  // This will suspend if the data isn't ready
  const user = userResource.read(userId);
  
  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.bio}</p>
    </div>
  );
}

// Usage with Suspense
function App() {
  return (
    <Suspense fallback={<Spinner />}>
      <UserProfile userId={123} />
    </Suspense>
  );
}

3. Use Transitions for Non-Urgent Updates

function TabContainer() {
  const [tab, setTab] = useState('home');
  const [isPending, startTransition] = useTransition();
  
  function selectTab(nextTab) {
    // Mark tab switching as a transition
    startTransition(() => {
      setTab(nextTab);
    });
  }
  
  return (
    <div>
      <TabButtons 
        selectedTab={tab} 
        onChange={selectTab}
        isPending={isPending}
      />
      
      <TabPanel tab={tab} />
    </div>
  );
}

Interview Tips

  • Explain that Concurrent Mode has evolved into individual concurrent features in React 18
  • Discuss how Suspense separates the loading state from the data fetching logic
  • Explain the difference between urgent updates (like typing) and non-urgent updates (like search results)
  • Highlight how useTransition and useDeferredValue help prioritize updates
  • Mention that these features are built on top of React’s Fiber architecture
  • Be prepared to discuss how these features integrate with data fetching libraries
  • Explain the benefits in terms of user experience, not just technical implementation

Test Your Knowledge

Take a quick quiz to test your understanding of this topic.