From 8f391d7d523c5f8df6d0d048d59ef09889269d0f Mon Sep 17 00:00:00 2001
From: Alexander Clausen <alex@gc-web.de>
Date: Sun, 6 Jan 2019 05:49:03 +0100
Subject: [PATCH] Cleanup popup nodes

Before, the component instances used for rendering popup content were
kept around, slowly leaking memory. This could be observed using react
developer tools.
---
 src/components/map/MapboxGlMap.jsx | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/map/MapboxGlMap.jsx b/src/components/map/MapboxGlMap.jsx
index 44ba32ab..59349d08 100644
--- a/src/components/map/MapboxGlMap.jsx
+++ b/src/components/map/MapboxGlMap.jsx
@@ -17,10 +17,12 @@ import '../../libs/mapbox-rtl'
 
 const IS_SUPPORTED = MapboxGl.supported();
 
-function renderPropertyPopup(features) {
+function renderPopup(popup) {
   var mountNode = document.createElement('div');
-  ReactDOM.render(<FeaturePropertyPopup features={features} />, mountNode)
-  return mountNode.innerHTML;
+  ReactDOM.render(popup, mountNode)
+  var content = mountNode.innerHTML;
+  ReactDOM.unmountComponentAtNode(mountNode);
+  return content;
 }
 
 function buildInspectStyle(originalMapStyle, coloredLayers, highlightedLayer) {
@@ -162,11 +164,9 @@ export default class MapboxGlMap extends React.Component {
       buildInspectStyle: (originalMapStyle, coloredLayers) => buildInspectStyle(originalMapStyle, coloredLayers, this.props.highlightedLayer),
       renderPopup: features => {
         if(this.props.inspectModeEnabled) {
-          return renderPropertyPopup(features)
+          return renderPopup(<FeaturePropertyPopup features={features} />);
         } else {
-          var mountNode = document.createElement('div');
-          ReactDOM.render(<FeatureLayerPopup features={features} onLayerSelect={this.props.onLayerSelect} />, mountNode)
-          return mountNode
+          return renderPopup(<FeatureLayerPopup features={features} onLayerSelect={this.props.onLayerSelect} />);
         }
       }
     })