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:

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

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

The technique is simple, you wrap your component under Suspense. The Suspense accepts a fallback component to display until the component data is fetched. The fallback component is rendered as long as the Promise is not resolved.

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.

?? Using idependent components to fetch and structure data allows for greater consistency, easier integrations and reusability. This is how an open-source toolchain like Bit can help with data fetching in React by providing a platform for sharing and reusing components that handle data fetching. Get started with component-driven data fetching here.

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.