How to Fetch API Data in React Like a Pro ​

Building applications the user use love is not an easy task. It requires a lot of thinking about how you build your application. Using these quick but easy steps will improve your app user experience.

How This Simple Technique Will Boost User Experience? ​

The technique we are going to talk about is known as render as you fetch. This simple technique is also suggested by React itself while fetching data. It allows you to make your application render components concurrently while fetching data. Instead of making an entire part of an application wait for the data, you render those parts concurrently by fetching data in parallel. It will lead to a great user experience, as the user will not have to wait longer for your application to load.

Fetching Data Like a Pro ​

The React feature we are going to use is called Suspense. Suspense helps you with making handling async operations easy. It allows you to tell users that the expected data will be displayed. Suspense defers the execution of the entire component tree until the Promise inside the component is either resolved or rejected.

A typical example of fetching data in React: ​

const [lyrics, isLoading] = fetchData("lyrics");

if (isLoading) {
  return <Spinner />
}

return <Lyrics data={lyrics} />;

const [lyrics, isLoading] = fetchData("lyrics");

if (isLoading) {
  return <Spinner />
}

return <Lyrics data={lyrics} />;

Instead of using this approach, we can use a better approach by allowing React to handle async operations itself.

import { Suspense } from "react";
import Gallery from "./Gallery";
import Logo from "./Logo";
import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <Suspense fallback={<h1>Loading</h1>}>
        <Logo />
        <Gallery />
      </Suspense>
    </div>
  );
}

import { Suspense } from "react";
import Gallery from "./Gallery";
import Logo from "./Logo";
import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <Suspense fallback={<h1>Loading</h1>}>
        <Logo />
        <Gallery />
      </Suspense>
    </div>
  );
}

The above app is a simple example of fetching data using React Suspense.

How to inform React that data is being fetched ​

To inform React that the data required by the component is being fetched, you need to throw a promise. React uses the thrown value to detect if the component is ready to be rendered. Once data is fetched, you just need to throw the data, and the component will be rendered. This very simple and quick method allows you to tell React that you want it to handle data fetching status instead of handling it yourself.

Concurrency Does The Magic ​

Suspense allows you to render component trees concurrently while data fetching. Suppose you have two components inside Suspense; both will start rendering in parallel. Instead of holding both component trees, the data required for both component trees will be fetched in parallel. It will lead to better performance and a great user experience.

Above is an example of a network request with typical data fetching in React.

Above is an example of a network request with data fetching using Suspense.