uiwjs
React 18.3: `unmountComponentAtNode` is deprecated
Description
unmountComponentAtNode used in usePortal is deprecated, possibly removed in React 19. Now in React 18.3, you will get an error message in console when this API is used, e.g., Marker(check the reproduction link below).
Assuming we continue to support React 19, we may need a workaround for its current usage.
Links
@martesi I cannot guarantee full support for React 19. All issues will be addressed in version 7 of react-amap.
@jaywcjlove Thank you for quick response. In 7.0.0, the unmountComponentAtNode warning is replaced by a new one.
You can check the demo here.
The original issue is solved, and this is just a warning, should I close this one, wait and see if this causes real damage?
@jaywcjlove see demo here. Click the "forcing update" button then you get a DOMException.
Actually, I was thinking maybe we can just use useEffect to append our holder to the container, then remove it in the cleanup. The portal can be render by user application anyway, we just need a stable host as target.
- User renders content on the invisible element that we created
- Actual container passed in
- Append our invisible element
- Actual container moves out of dom
- Remove our invisible element from the container
I think recourses are tied with user app, since the portal is rendered by it. So we might not need unmountComponentAtNode in the first place. I could be wrong, please tell me if I am.
@martesi This might not be an issue with the component.
<Marker
- key={key}
visiable={true}
title="北京市"
position={new AMap.LngLat(116.405285, 39.904989)}
>
<div style={{ fontSize: 20 }}>hello </div>
</Marker>
<button
style={{ position: "absolute", top: 0, left: 0 }}
onClick={() => setKey((v) => ++v)}
>
+ forcing refresh{key}
</button>
@martesi I don't know how to fix it; if you don't change the key, it works fine.
https://github.com/uiwjs/react-amap/assets/1680273/3a8198ae-5e86-4ced-9806-32f8b06e878c
@jaywcjlove try my branch forcing-refresh-old and forcing-refresh-new. I implemented what I mentioned earlier, it seems to work.