How to Fetch API Data in React Like a Pro

[hernanytec]

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.

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.

See the original post here.