react-native-aria
react-native-aria copied to clipboard
Portal not rerenders elements with strict mode in React 18
React version: 18.2.0
Steps To Reproduce
- Use React.StrictMode
- Use portal inside strictmode block.
The current behavior
- Portal unmounts element based on strictmode behaviour, but not unsets refs
- Value of overlayId stays old, but this overlay already destroyed and can't be updated
The expected behavior
- After unmount and removing portal elements, overylayId.current should become undefined again, then it will work fine and portal will mount elements again.
Broken code part
https://github.com/GeekyAnts/react-native-aria/blob/ec14df07ea1273f81e73eeb4ac41f63d455495b1/packages/overlays/src/Portal.tsx#L106
React 18 strict mode changes
https://reactjs.org/blog/2022/03/29/react-v18.html#new-strict-mode-behaviors
Estimated fix
useEffect(() => { return () => { if (overlayId.current) { context?.removeOverlayItem(overlayId.current); overlayId.current = undefined; } }; }, []);