The 3 Ways to Handle Data Fetching Logic in React Projects

Explore and find the best out of 3 ways of handling Data Fetching Logic in React projects.

The three ways to do it.

The Simplest Way

Just do not use any libraries apart from the browser-supported Fetch API.

Here is an example:

This might be the way to do it in a basic web app, but most of the time we are building something complex with various API calls. The above approach though simple is not the best way to handle data fetching logic in a complex app. The reason being it makes your component look bloated with logic and you have to write a lot of non-business logic. You could improve this by creating a custom hook and abstracting out the logic. Or the even better way is to use external libraries that provide much more than just fetching data like the ones below.

The Redux Way

If your project already uses Redux with the help of the Redux Toolkit, then you can use the RTK Query to handle this logic. It uses fetch internally, so you just need to set up endpoints and base URLs.

Here is how you set it up:

npm install @reduxjs/toolkit react-redux

Then in your project directory create a services folder with the API definition in it:

You can already see how you can set up all your endpoints in one place. Next, all you have to do is set up your store. Do remember to export the auto-generated hooks as I did, this is how the RTK Query docs want you to do.