React Native | Tutorial Suspense | Data Fetching | SWR | Code with Beto

Learn how to implement React Suspense in a React Native app using SWR for data fetching. You'll see how to create a smooth loading experience with Suspense and how to fetch and display dynamic user data from an API.

If you want to improve your React Native apps by handling asynchronous data elegantly and avoid manual loading states, this tutorial is for you. You'll learn how to set up a new Expo project, upgrading to React 18, configuring SWR with Suspense, and building reusable components.

What's inside

Creating a new Expo project and upgrading to React 18
Installing and configuring SWR for data fetching
Using Suspense with SWR to handle loading states
Building a reusable Card component for user data
Creating a List component to fetch and render multiple cards
Styling components and fixing layout issues
Using SWR's suspense mode for automatic loading fallback
Accessing and displaying dynamic API data

Creating a new Expo project and upgrading to React 18

I start by creating a new Expo project with using a blank template. After installing dependencies, I open the project in Visual Studio Code and run the Expo server with . The default React version is 17, so I run a command to upgrade React and React Native to version 18 to enable Suspense support.

Upgrading to React 18 is necessary because Suspense for data fetching requires the latest React features. This step ensures your app can use Suspense properly with SWR.

Installing and configuring SWR for data fetching

Next, I install SWR, a React Hooks library for data fetching. I run to add it to the project. SWR simplifies fetching, caching, and updating data in React apps.

I then create an provider at the root of the app to configure SWR globally. Inside the config, I set the function that fetches data from an API and parses JSON. I also enable so SWR works with React Suspense, automatically suspending components until data is ready.

Using Suspense with SWR to handle loading states

With SWR configured for Suspense, I wrap the part of the app that fetches data inside React's component. This tells React to show a fallback UI (like a loading indicator) while the data is loading.

When the data finishes loading, Suspense renders the actual UI with the fetched data. This approach removes the need to manually track loading states and conditionally render loaders.

Building a reusable Card component for user data

I create a component inside a folder. This card displays user information like name and avatar with a nice shadow style.

Instead of building the card from scratch, I copy a pre-made card component from his Code with Beto resources to save time. I adjust the imports and props to fit the fetched user data.

This reusable card makes it easy to display each user in a consistent style.

Creating a List component to fetch and render multiple cards

To render multiple user cards, I create a component. This component uses SWR to fetch a list of random users from a free API endpoint.

Inside the list, I maps over the fetched data's results array and renders a for each user. The list is wrapped in a ScrollView from React Native.

Because SWR is in suspense mode, the entire list suspends rendering until the data is ready, showing the fallback UI automatically.

Styling components and fixing layout issues

I adjust styles to fix layout problems like text alignment and spacing. I removes conflicting styles like and that interfere with the card layout.

I add a title style with background color and centered text to improve the UI. These small tweaks make the app look polished and professional.

Using SWR's suspense mode for automatic loading fallback

By setting in the SWR config and wrapping components in React's , the app automatically shows a loading fallback while data loads.

This integration means you don't have to write manual loading state logic. Suspense and SWR handle it for you, simplifying your components and improving user experience.

Accessing and displaying dynamic API data

The API used returns random user data each time the component loads. This means every reload shows different users with images and names.

I demonstrate how to access nested data like from the API response and pass it to the card components. This dynamic data fetching is key for real-world apps that consume APIs.

Resources

CourseReact Native course

Fundamentals through shipping: the concepts behind the prompts, with lifetime access.

YouTubeReact Native | Tutorial Suspense | Data Fetching | SWR

Watch the full video tutorial on using Suspense with SWR in React Native.

Let's connect!