Uh oh!
There was an error while loading.Please reload this page.
- Notifications
You must be signed in to change notification settings - Fork51
Description
Hi!
After a long night of debugging, I have found a weird bug in kea, when using it withReact.Suspense andlazy.
In short, when mounting a logic, in a component that is wrapped with aSuspense 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 theunmountuseRef in theuseMountedLogic 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'scontext. The logic is mounted inLogicComponent, which get's rendered when we choose a page. Tha pages are loaded withlazy and rendered in theLogicComponent. Then, when we return to pageNone, 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 :)