React 18 | Tutorial Suspense | Data Fetching | SWR

I'll teach you how to use React 18 Suspense for data fetching with the SWR library. You'll learn upgrading a React project to version 18, setting up the new root API, and integrating SWR to simplify data loading states.

If you want to improve your React apps by handling asynchronous data elegantly with Suspense and SWR, this tutorial is for you. You’ll see practical code examples and learn how to avoid manual loading and error handling boilerplate.

What's inside

• Creating a new React 18 project with Vite
• Updating React 17 to React 18 and using createRoot
• Introduction to React Suspense for data fetching
• Installing and configuring SWR for fetching data
• Using SWR’s fetcher function with fetch and JSON parsing
• Enabling Suspense mode in SWR for automatic loading states
• Wrapping the app with SWRConfig provider
• Simplifying components by removing manual loading/error checks

Creating a new React 18 project with Vite

I start by creating a new React project using Vite with the command npm init vite@latest. You pick React as the framework and choose the "normal" template for simplicity. After the project is created, you install dependencies with npm install and run the development server with npm run dev.

This quick setup gets you a React app running locally in seconds, ready for React 18 features. I show opening the project in Visual Studio Code and running the server to verify everything works.

Updating React 17 to React 18 and using createRoot

Since Vite’s default React template uses React 17, the next step is upgrading to React 18. You update the package.json to "react": "18.0.0" and run npm install again.

React 18 introduces a new root API, so you replace the old ReactDOM.render with createRoot from react-dom/client. You select the container element and create a root with createRoot(container), then call root.render(<App />).

This change is necessary to use React 18 features like Suspense for data fetching properly.

Introduction to React Suspense for data fetching

Suspense lets React components "wait" for asynchronous data before rendering. Instead of manually checking loading or error states, Suspense shows a fallback UI (like a loading message) while data is being fetched.

I explain how Suspense helps avoid repetitive loading logic in components. It shows a simple example where a component fetches data and Suspense automatically displays "Loading..." until the data arrives.

Installing and configuring SWR for fetching data

To handle data fetching, I introduce SWR, a React hook library by Vercel. SWR simplifies fetching, caching, and updating remote data.

You install SWR with npm install swr and import SWRConfig and useSWR in your app. SWR requires a fetcher function that returns a promise resolving to the data.

Using SWR’s fetcher function with fetch and JSON parsing

The fetcher function is defined as an async function that calls fetch with a URL, then parses the response as JSON. This function is passed to SWR to handle all data requests.

I show how to write this fetcher once and reuse it for all SWR hooks, keeping data fetching consistent and simple.

Enabling Suspense mode in SWR for automatic loading states

SWR supports a suspense option that integrates with React Suspense. By setting suspense: true in SWR hooks or the global config, SWR suspends rendering until data is ready.

This removes the need for manual loading checks inside components. Instead, Suspense fallback UI handles loading states automatically.

Wrapping the app with SWRConfig provider

To enable SWR globally, you wrap your app component with the SWRConfig provider. Inside it, you pass the fetcher function and set suspense: true in the config.

This setup means all SWR hooks inside your app will use Suspense mode by default, streamlining data fetching across components.

Simplifying components by removing manual loading/error checks

With Suspense and SWR configured, components no longer need to check if data is loading or if there’s an error. I show removing conditional rendering for loading states and errors.

Components just call useSWR and render the data directly. Suspense handles showing fallback UI while data loads, making components cleaner and easier to maintain.

Resources

CourseReact (web) course

Master React fundamentals, hooks, and advanced patterns including Suspense and data fetching.

YouTubeReact 18 | Tutorial Suspense | Data Fetching | SWR

Watch the full tutorial on using React 18 Suspense with SWR for data fetching.