React Suspense for Data Fetching

Why This is Interesting

1. Suspense Magic: React Suspense allows the component to “suspend” rendering while the data is being fetched, showing a fallback UI (like “Loading…”) until the data is ready. This eliminates the need for manual loading states with useState and useEffect.
2. Caching Twist: The fetchUserData function uses a Map to cache results, so subsequent renders or re-fetches for the same userId don’t hit the network again. If the data is already fetched, it’s returned immediately; if it’s in progress, Suspense waits for the promise to resolve.
3. Error Handling: If the fetch fails, the error is cached and thrown, which can be caught by an ErrorBoundary (not shown here but pairable with Suspense) for a clean error UI.

How It Works

• When UserProfile calls fetchUserData, it either gets the data immediately (if cached) or throws a promise (if fetching).
• Suspense catches the thrown promise and renders the fallback until the promise resolves.
• Once the data is fetched, the component re-renders with the actual content.

This approach is a preview of how React is evolving to make data fetching more declarative and less boilerplate-heavy.