Description
Hi!
After a long night of debugging, I have found a weird bug in kea, when using it with React.Suspense and lazy.
In short, when mounting a logic, in a component that is wrapped with a Suspense component, and in that component, is rendered a lazy component, the logic is mounted twice, but unmounted only once.
I don't have much knowledge of how Suspense works, but it seems, that it holds the livecycle of a component, until the lazy component gets loaded, and then it launches the component once again. But as kea mounts the logic outside of the component lifecycle, the mount method gets called twice (it seems, that the unmount useRef in the useMountedLogic is not preserved).
I've created a simple codesandbox, that showcases this issue:
https://codesandbox.io/s/kea-mount-suspense-bug-tuquvs?file=/src/app.js&fbclid=IwAR2KIVJDj2-jKQJa6Bmbtb-lSrpD-d8Xa3gAe_0FC1ErWBZmmiYXvCrDCAw
In the console, i'm logging the mount counter from kea's context. The logic is mounted in LogicComponent, which get's rendered when we choose a page. Tha pages are loaded with lazy and rendered in the LogicComponent. Then, when we return to page None, the component is unmounted, but the logic is still mounted.
To be honest, I have no ideas how to fix this, but if I could help you somehow with this issue, i'd be happy to.
And if that's some kind of issue on my side, then I would really appreciate any help with this :)