After trying different solutions, including the recommended approach Can't perform a React state update on an unmounted component nothing seemed to solve my problem.
EDIT: I've noticed this happens only on the first render after the first render im not getting any error
I'm using react-gesture-gallery inside my component like so :
return (
<CardsContainer>
<Gallery
style={{
background: "linear-gradient(to bottom, #FFFFFF,#5643fa )"
}}
index={index}
onRequestChange={ i => setIndex(i)}
>
<SingleSwipeCard
handleClick={() => startDefaultGame()}
text={practiceSavedWordsText}
/>
<SingleSwipeCard
handleClick={() => startDefinitionGame()}
text={practiceCompletingSentences}
/>
<SingleSwipeCard
handleClick={() => startGrammerGame()}
text={practiceTypingWordsText}
/>
</Gallery>
</CardsContainer>
)
i have 3SingleSwipeCard components ,Now I want the animation to play automatically so my useEffect hook looks like this :
useEffect(() => {
console.log("did mount");
timer = setInterval(() => {
if (index === 2) {
setIndex(0);
} else setIndex(index + 1);
}, 8000);
return () => {
console.log("un mount");
clearInterval(timer);
};
}, [index, gameStarted]);
The animation works as expected, but the problem is that my handleClick functions are redirecting the users to another page in the app, so I get Can't perform a React state update on an unmounted component....
Although the component does not seem to render after the page-routing functions, and the cleanUp function is getting called on the last render something is missing here and I'm getting a memory leak.
