I've been debugging a memory issue in the Memory Profiler for a React/Redux App and I've noticed these Detached HTMLDivElements along with a few other types of elements.
I'm not using a typical navigation library just using state to move screens around. I'm not sure if this is an issue with Chrome and it's Garbage Collector or React and somehow holding a reference to old screens.
What reasons would there be for a React app to keep these Detached Elements. Could redux connect() potentially hold a reference to the store causing the component to not get recycled?
Lastly, I should say this is a React/Redux app as a Chrome Extension.
Digging into the issue I've noticed that the class Messenger (the root component that holds the chat messaging logic) is listed 3 times in the Memory Profiler.
And here's how I've structured screens.
renderScreen = () => {
switch (this.state.screen) {
case Screen.HOME:
return <Home/>
case Screen.MESSENGER:
return <Messenger/>
....
}
}
render() {
...
return this.renderScreen()
}
Does this mean that a new class Messenger is created every time it navigates to that component?