How to use AbortController in React
In this post, I will show you how to use AbortController
in React.
AbortController
is a built-in JavaScript interface used to control and cancel asynchronous operations, especially those that return Promise
objects, such as fetch()
requests.
It provides a way to abort a request, preventing the operation from completing if, for example, the component is unmounted in a React application or if the user navigates away before the fetch completes.
Example Using AbortController
with fetch
in React
import React, { useEffect, useState } from 'react';
function FetchDataComponent() {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
// Create an instance of AbortController
const controller = new AbortController();
const signal = controller.signal;
const fetchData = async () => {
try {
const response = await fetch('https://example.com/posts',
{ signal }
);
if (!response.ok) {
throw new Error('Network response was not ok');
}
const result = await response.json();
setData(result);
setLoading(false);
} catch (err) {
if (err.name === 'AbortError') {
console.log('Fetch request aborted');
} else {
setError(err.message);
setLoading(false);
}
}
};
fetchData();
// Cleanup function to abort the fetch if the component unmounts
return () => {
controller.abort();
};
}, []);
if (loading) return <p>Loading...</p>;
if (error) return <p>Error: {error}</p>;
return (
<div>
<h1>Fetched Data</h1>
<pre>{JSON.stringify(data, null, 2)}</pre>
</div>
);
}
export default FetchDataComponent;
In the above code snippet, we are using the AbortController
interface to create a new controller object and then pass its signal
property to the fetch
method to abort the request when needed. We also update the loading state based on the request status and display the fetched data if available.