Optimizing API Requests in ReactJS for 2020

Table of Contents:

1. Introduction
2. Setting up a React App
3. Installing Axios
4. Using React Hooks for multiple API calls
5. Creating variables for player's name and picture
6. Fetching data from API URLs
7. Making GET requests with Axios
8. Using Promise.all to run multiple requests
9. Accessing data from API responses
10. Displaying the retrieved data
11. Conclusion

How to Run Multiple API Calls in One Function in React

In this tutorial, we will learn how to run multiple API calls in one function in a React application. We will be using two different NBA APIs to retrieve a player's name and photo. Before we dive into the implementation, I want to thank each and every one of You for helping us reach 50 subscribers. Your support means a lot to us. If you find this video helpful, don't forget to give it a like. Now, let's get started!

1. Introduction

Running multiple API calls in one function can be a common Scenario in modern web development. By combining multiple requests into a single function, we can reduce redundant code and improve the efficiency of our application. In this tutorial, we will use React and Axios to demonstrate how this can be achieved.

2. Setting up a React app

Before we begin, make sure you have a React app set up. If you haven't set up a new React app yet, you can follow the official documentation to do so.

3. Installing Axios

To make HTTP requests from our React app, we will use Axios. It is a popular JavaScript library that provides an easy-to-use API for making HTTP requests. Install Axios in your React app by running the following command in your project's root directory:

npm install axios --save

4. Using React Hooks for multiple API calls

In this tutorial, we will use React Hooks, specifically the useState and useEffect hooks, to manage state and side effects in our component. If you are not familiar with React Hooks, I highly recommend checking out the official React Hooks documentation.

5. Creating variables for player's name and picture

To store the data retrieved from the API calls, we need to Create two variables: playerName and playerPic. We will use the useState hook to create these variables and their corresponding setter functions. Initialize both variables with an empty STRING.

const [playerName, setPlayerName] = useState('');
const [playerPic, setPlayerPic] = useState('');

6. Fetching data from API URLs

Next, we need to fetch data from the NBA APIs. Let's create a function called fetchData to handle this task. Inside the fetchData function, we will define the URLs for the API calls and store them in separate variables.

const playerAPI = 'https://api.example.com/player';
const playerPicAPI = 'https://api.example.com/playerPic';

7. Making GET requests with Axios

Using Axios, we can make GET requests to retrieve data from the API URLs. In our fetchData function, let's use Axios to make these requests and store the response data in separate variables.

const getPlayerData = axios.get(playerAPI);
const getPlayerPicData = axios.get(playerPicAPI);

8. Using Promise.all to run multiple requests

To run multiple API requests simultaneously, we can use the Promise.all method provided by JavaScript. By passing an array of promises to Promise.all, we can ensure that all requests are executed in Parallel. In our case, we want to run the getPlayerData and getPlayerPicData requests together.

const allRequests = [getPlayerData, getPlayerPicData];
const responses = await Promise.all(allRequests);

9. Accessing data from API responses

Once we receive the responses from the API requests, we can access the data by using the index of the response in the responses array. The data returned from the NBA player API will contain the player's name, while the data returned from the player picture API will contain the URL for the player's photo.

const playerData = responses[0].data;
const playerPicData = responses[1].data;

10. Displaying the retrieved data

Now that we have the player's name and picture data, we can display them in our component. Simply use the playerName and playerPic variables directly in your JSX code.

<h1>{playerName}</h1>
<img src={playerPic} alt="Player" />

11. Conclusion

Congratulations! You have successfully learned how to run multiple API calls in one function in a React app. By leveraging Axios and React Hooks, you can easily retrieve data from multiple APIs and display it in your application. Remember to consider your application's performance and make efficient use of API requests. If you have any questions, feel free to leave them in the comments below. Happy coding!