Skip to main content

Suspense and Concurrent Features

Suspense for Data Fetching​

import { Suspense } from 'react';

function App() {
  return (
    <Suspense fallback={<Loading />}>
      <UserProfile userId='123' />
    </Suspense>
  );
}

// Component that suspends
function UserProfile({ userId }) {
  const user = use(fetchUser(userId)); // React 19
  return <div>{user.name}</div>;
}

useTransition - Non-Blocking Updates​

import { useTransition, useState } from 'react';

function SearchResults() {
  const [query, setQuery] = useState('');
  const [isPending, startTransition] = useTransition();

  const handleChange = e => {
    const value = e.target.value;

    // Urgent: Update input immediately
    setQuery(value);

    // Non-urgent: Update results
    startTransition(() => {
      setSearchResults(expensiveSearch(value));
    });
  };

  return (
    <>
      <input value={query} onChange={handleChange} />
      {isPending && <Spinner />}
      <ResultsList />
    </>
  );
}

useDeferredValue​

import { useDeferredValue } from 'react';

function ProductList({ searchTerm }) {
  const deferredSearchTerm = useDeferredValue(searchTerm);

  const filteredProducts = useMemo(() => {
    return products.filter(p => p.name.includes(deferredSearchTerm));
  }, [deferredSearchTerm]);

  return <List items={filteredProducts} />;
}

Concurrent Rendering Benefits​

  • Interruptible rendering - React can pause work
  • Priority-based updates - Urgent vs non-urgent
  • Better user experience - UI stays responsive
  • Automatic batching - Multiple state updates batched