ModalPortal not being cleaned up after componentWillReceiveProps

[B-Reif]

Summary:

In my codebase, react-modal leaves behind its current ModalPortal element after receiving new props. It creates a new portal with the new data as expected, but it does not clean up the old ModalPortal element.

Steps to reproduce:

I've tried to reproduce the behavior in a Codepen and in a separate demo app, but I couldn't reproduce the issue. I only encounter the issue in an (unfortunately closed-source) application I'm developing.

Expected behavior:

Only one ModalPortal should exist. ModalPortal elements should not be left behind.

Additional notes:

I was encountering this issue both before and after the 3.0.0 release.

I assume this issue may be somehow external to react-modal, since I can't reproduce it elsewhere. But I have no idea how my application environment could be getting in react-modal's way of removing its portal, and I'm running out of ideas.

[diasbruno]

@B-Reif Can you give a little bit more info about how your modal is setup, defined and/or used?

[slava-osipov-qs]

I've faced similar issue when ModalPortal was not removed. In my case the problem was in lifecycle of root element for my React app. In my scenario root element was vanished, but React did not get notification about it, so child Modal component was not unmounted and as result ModalPortal was not unmounted too. I've solved my issue by direct call of ReactDOM.unmountComponentAtNode() at appropriate moment.

[diasbruno]

@slava-osipov-qs can you make a reproducible example with this?

[slava-osipov-qs]

I guess such example will not be usefull. The problem was not in react-modal component, problem was in environment. I injected React app into Angular app, so it was my responsibility to manage React app initialization and destroying. I.e. it is not a responsibility of react-modal.
But this issue caused me to think about single instance of ModalPortal associated with AppElement, that is assigned with Modal.setAppElement(). Could you think about possibility to have only single instance of ModalPortal? It also could reduce memory usage, if one want to have thousands of Modal instances in app.