Random errors on unmountComponentAtNode

[karolis-sh]

Hi, I'm rendering the frame component inside a portal (actually 2 iframes inside 2 different portals), and sometimes I get an error and the component unmounts:

Uncaught Invariant Violation: unmountComponentAtNode(...): Target container is not a DOM element.

react-dom.development.js:506 Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
    in Reactiifyer (created by App)
    in App

package.json:

    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-frame": "^2.2.19",

Not really sure what's the cause of the error.

[wangzuo]

Can you post an example on https://codesandbox.io ?

[karolis-sh]

Was a bit tricky to reproduce bet here it goes.

Here's the code https://codesandbox.io/embed/determined-darkness-r6xpi
Open the preview url https://r6xpi.codesandbox.io/ and open dev tools and try to move cursor fast in and out of the window.

The unmount error occurs because I do heavy calculations in the iframe and unmount the iframe component when mouse leaves the window. Here's the error in action https://gfycat.com/fancywastefuljoey (not really sure how to upload vid directly 😕)

While working in codesandbox I noticed the same error when hot reloading occurred in some cases.