react-native-portalize icon indicating copy to clipboard operation
react-native-portalize copied to clipboard

fix: use useRef for Host queue to improve stability

Open teaualune opened this issue 4 years ago • 1 comments

While using this library to build "overlay" widgets in our RN project, we discovered that some Portals did not unmount correctly.

For instance, our react-navigation based project has ScreenA containing OverlayA, which are implemented with Portal. When ScreenA is popped, we found that sometimes OverlayA is not unmounted, out of our expectation.

After some digging, it seems that the queue array in Host component might be one of the problem: since Host is a functional component, queue is re-initialized each time Host re-renders. According to the original implementation, queue is a class member, so it should become a RefObject after converting to functional component.

I utilized patch-package to create a hotfix for my project and the behavior becomes expected, so I created this PR to address the problem. This PR rewrites queue into a RefObject with useRef as well as extracts type definition of queue into IPortalAction.

teaualune avatar Aug 31 '21 12:08 teaualune

For anyone looking for a patch: https://gist.github.com/lucasjohnston/5bf626fae923009ae1cf5a5db894842f

In the process of debugging our freezing issues I came across this thread and realised modals aren't unmounting properly as OP described. Currently trying to fix my issue with a combination of this patch and using InteractionManager.runAfterInteractions().

lujstn avatar Mar 27 '22 17:03 lujstn