What is the Suspense pattern and data fetching with it?

Suspense lets components "wait" for something before rendering. The component throws a Promise; React catches it and shows the fallback.

// React.lazy — built-in Suspense integration
const Chart = lazy(() => import('./Chart'));

// React Query with Suspense mode
function UserProfile({ id }) {
  // This will suspend (throw) if data isn't ready yet
  const { data: user } = useSuspenseQuery({
    queryKey: ['user', id],
    queryFn: () => fetchUser(id),
  });

  return 
{user.name}
; // Only renders when data is ready
}

// Wrapping with Suspense
function Page() {
  return (
    }>
      
    
  );
}

// Nested Suspense — granular loading states
function Dashboard() {
  return (
    }>
      
      }>
          {/* loads independently */}
      
    
  );
}