How to fix Cannot use Suspense boundary without an async component in React

import { Suspense, lazy } from "react";

// Lazy load the component - this makes it suspend
const HeavyComponent = lazy(() => import("./HeavyComponent"));

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

import { Suspense, use } from "react";

function UserProfile({ userPromise }: { userPromise: Promise<User> }) {
  // Calling use() suspends the component until userPromise resolves
  const user = use(userPromise);
  
  return <div>Welcome, {user.name}</div>;
}

export function App() {
  const userPromise = fetchUser();
  
  return (
    <Suspense fallback={<div>Loading user...</div>}>
      <UserProfile userPromise={userPromise} />
    </Suspense>
  );
}

import { Suspense } from "react";
import { useSuspenseQuery } from "@tanstack/react-query";

function UserData() {
  // useSuspenseQuery suspends while fetching
  const { data } = useSuspenseQuery({
    queryKey: ["user"],
    queryFn: fetchUser,
  });
  
  return <div>{data.name}</div>;
}

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

import useSWR from "swr";

function UserData() {
  const { data } = useSWR("/api/user", fetcher, { suspense: true });
  return <div>{data.name}</div>;
}

import { Suspense, Component } from "react";

class ErrorBoundary extends Component {
  state = { hasError: false };
  
  static getDerivedStateFromError() {
    return { hasError: true };
  }
  
  render() {
    if (this.state.hasError) {
      return <div>Something went wrong</div>;
    }
    return this.props.children;
  }
}

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

import { ErrorBoundary } from "react-error-boundary";

<ErrorBoundary fallback={<div>Error occurred</div>}>
  <Suspense fallback={<div>Loading...</div>}>
    <AsyncComponent />
  </Suspense>
</ErrorBoundary>

// WRONG - This does NOT suspend
function UserData() {
  const [user, setUser] = useState(null);
  
  useEffect(() => {
    fetchUser().then(setUser);
  }, []);
  
  if (!user) return <div>Loading...</div>;
  return <div>{user.name}</div>;
}

// Wrapping this in Suspense does nothing - remove Suspense or migrate to use()

// app/page.tsx (Next.js App Router)
import { Suspense } from "react";

async function UserData() {
  const user = await fetchUser();
  return <div>{user.name}</div>;
}

export default function Page() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <UserData />
    </Suspense>
  );
}