I use Overmind with ionic react:
Tab1:
const { count } = useAppState()
const { increaseCount } = useActions()
return
<IonPage>
<IonContent>
<IonRouterLink routerLink='/tab1/page1'>1. Go to another page</IonRouterLink> // Go to page 1
<IonText><p>{count}</p></IonText>
<IonButton onClick={() => increaseCount()}>4. Increase again</IonButton>
</IonContent>
</IonPage>
Page2:
const { count } = useAppState()
const { increaseCount } = useActions()
return
<IonPage>
<IonContent>
<IonBackButton defaultHref="/" /> // Go back to tab 1
<IonText><p>{count}</p></IonText>
<IonButton onClick={() => increaseCount()}>4. Increase again</IonButton>
</IonContent>
</IonPage>
When I do this:
- Go to the other page
- Increase the count (modify state)
- Go back to main page
- Increase the count (modify state)
==> Go to console and there is the error
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.
I created this minimum reproduction code: https://github.com/dopeshot/ionic-overmind-cant-perform-state-update
I also created an short video of the issue: https://www.youtube.com/watch?v=5w6r1_lxoS8
How can I fix this issue?