Making a useEffect cleanup for multiple axios calls in React Native - react-native

Question

I am trying to make an axios call to a video game database with a URL specific to the chosen option by the user. Depending on the 'opt' chosen, it will get all the data linked to the option and place into a useState ('selectedResults') as shown below
function ViewContent() {
const [selectedOpt, setSelectedOpt] = useState('none');
const opts = ["Games", "Publishers and Developers", "Reviews", "Platform"];
const [selectedResults, setSelectedResults] = useState([]);
const getGames = (selectedOpt) => {
if(selectedOpt == 'Games'){
axios.get(apiURL.games)
.then(function (response){
results = JSON.stringify(response.data.data);
setSelectedResults(response.data.data);
})
.catch(function (error){
alert(error.message)
console.log('getGameTest', error);
})
}
else if(selectedOpt == 'Publishers and Developers'){
axios.get(apiURL.creators)
.then(function (response){
// results = JSON.stringify(response.data.data);
setSelectedResults(response.data.data);
})
.catch(function (error){
alert(error.message)
console.log('getCreatorTest', error);
})
}
else if(selectedOpt == 'Reviews'){
}
};
}
The error I get is
Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
Is there a way I can use the useEffect cleanup for multiple axios calls or would I have to make one for each? I am trying to look over some examples but I am not getting any progress. If I missed anything, feel free to ask and I will update the question.

Answer 1

You might want to update react state when the component
is mounted.
export const useIsMounted = (): { readonly current: boolean } => {
const isMountedRef = React.useRef(false);
React.useEffect(() => {
isMountedRef.current = true;
return () => {
isMountedRef.current = false;
};
}, []);
return isMountedRef;
};
You can create a hook just like the above one or you can prefer useIsMounted hook from this source in order to detect if the component is mounted. Then in your case, simply do the logic below.
if(isMounted.current) {
yourSetStateAction()
}