I’m confused about cleanup functions in useEffect hooks w/ axios. My component has an isLoading state as it’s getting the data from an API, and then the state changes to false once the data is displayed. This causes my component to render twice (‘loading’ first time, and populated with info the second time), which causes the axios api request within my useEffect fn to be called twice. The second time it logs “Axios request aborted” to the console. Is there any workaround for this or is it not a big deal?
export default function ParentComponent(){
const [ items, setItems ] = useState([]);
const [ isLoading, setIsLoading ] = useState(true);
useEffect(() =>{
const source = axios.CancelToken.source();
axios.get('https://api-url-here',
{ cancelToken: source.token})
.then(res => {
setItems(res.data.items);
setIsLoading(false);
})
.catch(err => {
if(axios.isCancel(err)) {
console.log('Axios request aborted.');
} else {
console.error(err)
}
});
return () => {
source.cancel();
};
}, []);
return(
<>
{ isLoading ? <h3>Loading...</h3> :
items.map(thing => <ChildComponentName key={thing.id} prop={'bla bla bla etc.'} />)
}
</>
)
}