React 18.3: `unmountComponentAtNode` is deprecated

[martesi]

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

• Link to reproduction
• React 19 Upgrade Guide

[jaywcjlove]

@martesi I cannot guarantee full support for React 19. All issues will be addressed in version 7 of react-amap.

[martesi]

@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]

@martesi Upgrade v7.0.1

[martesi]

@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.

[jaywcjlove]

@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]

@jaywcjlove check demo here. The same code but pinned version to 7.0.0. Works as expected.

[jaywcjlove]

@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

[martesi]

@jaywcjlove try my branch forcing-refresh-old and forcing-refresh-new. I implemented what I mentioned earlier, it seems to work.

[martesi]

I also created a draft PR, maybe this is more convenient for you to try?

[jaywcjlove]

@martesi thx! Upgrade v7.0.2