This post will cover how to programmatically cancel a fetch request in a React and TypeScript app.
We have a typical React component that fetches some data from a web API and renders it:
export function App() {
const [status, setStatus] = React.useState<"loading" | "loaded" | "cancelled">("loading");
const [data, setData] = React.useState<Character | undefined>(undefined);
React.useEffect(() => {
getCharacter(1).then((character) => {
setData(character);
setStatus("loaded");
});
}, []);
if (status === "loading") {
return (
<div>
<div>loading ...</div>
<button>Cancel</button>
</div>
);
}
if (status === "cancelled") {
return <div>Cancelled</div>;
}
return <div>{data && <h3>{data.name}</h3>}</div>;
}
The data is fetched inside the getCharacter
function inside a useEffect
and put in state called data
.
A state variable called status
tracks where we are in the fetching process. Notice that a Cancel button is being rendered when the data is being fetched.
When the Cancel button is clicked, we want to cancel the fetch request.
#react #typescript #javascript #web-development