axios CancelToken not functioning, React project - reactjs

Question

I have been trying to use axios CancelToken with react. But the cancel token has no effect whatsoever.
A brief about the code:
There is an input, and in the onChange event of the input fires the getData() function.
I want this to NOT send out an api request everytime the user presses the keys but only at the end or maybe after a timeout.
Please let me know what I'm doing wrong.
import React from 'react';
import axios from 'axios';
export default function Home() {
let axiosCancelToken;
async function getData() {
if (axiosCancelToken) {
axiosCancelToken.cancel();
console.warn('request cancelled')
}
console.info('no cancel', axiosCancelToken)
axiosCancelToken = axios.CancelToken.source();
let val = await axios({
method: 'GET',
url: 'https://jsonplaceholder.typicode.com/todos/1',
cancelToken: axiosCancelToken.token
})
}
...
And the <input.../>
<input type="text" onChange={getData} />

Answer 1

I guess it doesn't work because you are trying to cancel the wrong token.
Let's look at this example:
export default function Home() {
let axiosCancelToken;
async function getData() {
if (axiosCancelToken) {
axiosCancelToken.cancel();
}
axiosCancelToken = axios.CancelToken.source();
let val = await axios({
method: "GET",
url: "https://jsonplaceholder.typicode.com/todos/1",
cancelToken: axiosCancelToken.token
});
}
return (
<div>
<button onClick={getData}>Get Data</button>
</div>
);
}
Try clicking the button twice quickly, you will see the first request canceled as expected.
But if I change the code by adding some React state, it won't work anymore:
export default function App() {
let axiosCancelToken;
let [count, setCount] = useState(0);
async function getData() {
setCount((count) => count + 1);
if (axiosCancelToken) {
axiosCancelToken.cancel();
console.warn("request cancelled");
}
axiosCancelToken = axios.CancelToken.source();
let val = await axios({
method: "GET",
url: "https://jsonplaceholder.typicode.com/todos/1",
cancelToken: axiosCancelToken.token
});
}
return (
<div>
<button onClick={getData}>Get Data {count}</button>
</div>
);
}
And the reason for that is that when React has to re-render, it will call your function component again, where your axiosCancelToken will be instantiated again in the new scope.
To solve this you can just use React Refs.
let axiosCancelToken = useRef();