Making API calls is a common task in web development, but sometimes you may accidentally make the same API call twice. This can lead to unnecessary network traffic and increase the load on your server. In this article, we’ll discuss a solution to prevent dual API calling in ReactJS.
Duplicate API requests are common. In a scalable application, duplicate API requests can be problematic to the resources on a server, can affect the cost, and can interrupt performance.
That is why it is important to pay attention to API calls and ensure that no duplicate request is passed to the API. In the later segments, I will provide some of the probable reasons that can lead to duplicate API request issues and ways to overcome the problem.
So, let’s begin discussing about what exactly is an API if you’re unaware of it and how is it of vital importance in any ReactJS app development project. In this blog, I am going to mention the problem of dual APIs, how to solve it, and how to avoid it in the first place.
What’s An API & Its Importance in React JS
API stands for Application Programming Interface. It is a set of protocols, routines, and tools that allow different software applications to communicate with each other. APIs play an important role in ReactJS development as they allow ReactJS developers to integrate their applications with external services and access data from third-party APIs.
In ReactJS, APIs are used to make HTTP requests to servers, retrieve data, and update the application’s state. APIs provide a way to fetch data asynchronously and update the application’s UI in real-time. They also allow developers to build scalable and modular applications by separating the UI and business logic.
The Problem: Single API Being Called Twice
In ReactJS, a dual API calling issue refers to two situations. One is where two or more API calls are made at the same time, causing conflicts and errors in the application.
This issue can occur when multiple application components are making API calls independently, without coordinating with each other.
And the other one is the issue at hand, which involves a single unique API being called twice which basically is duplicate API requests.
The problem with dual API calls is that it can lead to race conditions, where one API call finishes before the other, causing unexpected behavior in the application.
For example, if two components make API calls to update the same data, one component’s changes may be overwritten by the other if the timing is not synchronized properly.
Consider the following ReactJS component that fetches some data from an API:
| import React, { useState, useEffect } from ‘react’; import axios from ‘axios’; const MyComponent = () => { const [data, setData] = useState([]); useEffect(() => { axios.get(‘<https://my-api.com/data>’).then(response => { setData(response.data); }); }, []); return ( <div> <h1>My Component</h1> {data.map(item => ( <div key={item.id}> <h2>{item.title}</h2> <p>{item.description}</p> </div> ))} </div> ); }; export default MyComponent; |
In the code above, we’re using the useEffect hook to make an API call and fetch some data from https://my-api.com/data. We’re then storing the data in the data state variable and rendering it in the component.
The problem with the code above is that if the component re-renders due to a state or prop change, the useEffect hook will be triggered again, and a new API call will be made. This can lead to double API calling, which can cause unnecessary network traffic and slow down your application.
What Causes Duplicate API Requests: Possible Reasons
There can be different scenarios where an API is called multiple times to get the data. I am listing the top 3 most common reasons that lead to the duplication of API requests below:
User Interface (UI) Interactions
One of the most common reasons for duplicate API requests is when a user taps on a button multiple times before it gets disabled. For example, when a user clicks on a submit button multiple times before the page finishes loading, it can trigger multiple API requests, which may result in duplicate data. This can cause an issue, especially when the application is processing a large amount of data.
Dependent API Requests
At times, one API response causes another API request to execute. For example, when an application requires multiple details from an API, it can lead to multiple requests being executed, which can result in duplicate data. This can be due to the timing of the requests, where the details API is hit multiple times while one is already under execution.
Scroll Events
Another common reason for duplicate API requests is when API requests on scroll events can hit an API multiple times as the scroll event triggers rapidly. This can happen when an application requires data to be fetched dynamically as the user scrolls down the page. If the application is not designed properly, it can lead to multiple requests being sent, which can cause duplicate data.
How To Avoid Dual API Calling
To avoid dual API calling issues in ReactJS, developers can implement a variety of techniques. One common approach is to use a state management library to centralize API calls and manage the application’s state. This allows components to access and modify the application’s state in a consistent manner.
Another technique is to use asynchronous functions and promises to manage API calls. By using promises, developers can chain multiple API calls together and ensure that they are executed in the correct order, avoiding conflicts and race conditions. Additionally, developers can use the async/await syntax to manage asynchronous API calls in a more intuitive and readable way.
The Solution: Cancellation Token
To solve the double API calling problem, we can use a technique called “cancellation token”. A cancellation token is an object that can be used to cancel an ongoing API request.
We can create a cancellation token and pass it to the API call. If the component re-renders before the API call has been completed, we can cancel the ongoing API request using the cancellation token.
Here’s how we can modify the previous code to prevent double API calling.
| import React, { useState, useEffect } from ‘react’; import axios from ‘axios’; const MyComponent = () => { const [data, setData] = useState([]); const [cancelToken, setCancelToken] = useState(null); useEffect(() => { if (cancelToken) { cancelToken.cancel(‘Operation canceled by the user.’); } const newCancelToken = axios.CancelToken.source(); setCancelToken(newCancelToken); axios.get(‘<https://my-api.com/data>’, { cancelToken: newCancelToken.token }).then(response => { setData(response.data); }); return () => { if (newCancelToken) { newCancelToken.cancel(‘Component unmounted.’); } }; }, []); return ( <div> <h1>My Component</h1> {data.map(item => ( <div key={item.id}> <h2>{item.title}</h2> <p>{item.description}</p> </div> ))} </div> ); }; export default MyComponent; |
In the code above, we’re using the axios. CancelToken class to create a new cancellation token. We’re storing the cancellation token in the state variable cancelToken. We’re then using the cancellation token to cancel any ongoing API request before making a new one.
We’re also using the useEffect hook to return a cleanup function that cancels any ongoing API request when the component is unmounted.
Handling The Errors
When an API request is canceled, Axios will throw a Cancel error. We need to catch this error and handle it gracefully. Here’s how we can modify the previous code to handle cancellation errors.
| import React, { useState, useEffect } from ‘react’; import axios from ‘axios’; const MyComponent = () => { const [data, setData] = useState([]); const [cancelToken, setCancelToken] = useState(null); useEffect(() => { if (cancelToken) { cancelToken.cancel(‘Operation canceled by the user.’); } const newCancelToken = axios.CancelToken.source(); setCancelToken(newCancelToken); axios.get(‘<https://my-api.com/data>’, { cancelToken: newCancelToken.token }).then(response => { setData(response.data); }).catch(error => { if (axios.isCancel(error)) { console.log(‘Request canceled:’, error.message); } else { console.log(‘An error occurred:’, error.message); } }); return () => { if (newCancelToken) { newCancelToken.cancel(‘Component unmounted.’); } }; }, []); return ( <div> <h1>My Component</h1> {data.map(item => ( <div key={item.id}> <h2>{item.title}</h2> <p>{item.description}</p> </div> ))} </div> ); }; export default MyComponent; |
In the code above, we’re using the axios.isCancel function to check if the error is a cancellation error. If it is, we’re logging a message to the console. If it’s not, we’re logging an error message to the console.
Conclusion
In conclusion, the dual API calling issue in ReactJS can cause conflicts and errors in the application. To avoid this issue, developers can use state management libraries or asynchronous functions and promises to centralize and manage API calls in a consistent and synchronized manner.
In this blog, we’ve discussed a solution to prevent double API calling in ReactJS. We’ve used the cancellation token technique to cancel ongoing API requests when a component re-renders before the API call has been completed. We’ve also handled cancellation errors gracefully.
By using the techniques discussed in this article, you can prevent double API calling and improve the performance and reliability of your ReactJS applications.
