I am getting this error – 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.
Here’s my useEffect hook, I used a ref called mounted to check if the component has unmounted or not but I am still getting the error when the component unmounts. (It takes about a minute for the error to show up).
useEffect(() => {
if(mounted.current){
if(mincounter === 0 && hrcounter > 0){
setHrcounter(hrcounter - 1);
setMincounter(60);
mincounter > 0 && setTimeout(() => setMincounter(mincounter - 1) , 1000*60)
}else if (mincounter === 0 && hrcounter === 0){
submitHandler()
}else{
mincounter > 0 && setTimeout(() => setMincounter(mincounter - 1) , 1000*60)
}
}
return () => {
mounted.current = false
console.log('info tab unmounting', mounted.current);
}
}, [mincounter, hrcounter, submitHandler,setHrcounter,setMincounter]);
TIA
const [subscriptions, setSubscriptions] = useState([]);
I usually store all my subscriptions on my component state and then call them when component will be un mounted (in the cleanup of useEffect hook)
Like this:
useEffect(() => {
const subscription1 = ...
const subscription2 = ...
// When you create subscriptions, just store them on state
setSubscriptions([...subscriptions, subscription1, subscription2]);
// Cleanup (Detach subscriptions)
return () => subscriptions.forEach(subscription => subscription)
},[])