Fix event listener memory leak

blizzardjessica · blizzardjessica · commit 8f3351b70aa8 · 2019-08-30T16:54:34.000-07:00
Event listeners are attached on every draw causing a memory leak
Fixed by removing event listener from event before attaching
diff --git a/dist/index.js b/dist/index.js
@@ -136,60 +136,79 @@ var PlotlyChart = /** @class */ (function (_super) {
         //   this.container!.on('plotly_buttonclicked', this.props.onButtonClicked);
         // }
         if (this.props.onClick) {
+            this.container.removeAllListeners("plotly_click");
             this.container.on('plotly_click', this.props.onClick);
         }
         if (this.props.onClickAnnotation) {
+            this.container.removeAllListeners("plotly_clickannotation");
             this.container.on('plotly_clickannotation', this.props.onClickAnnotation);
         }
         if (this.props.onDeselect) {
+            this.container.removeAllListeners("plotly_deselect");
             this.container.on('plotly_deselect', this.props.onDeselect);
         }
         if (this.props.onDoubleClick) {
+            this.container.removeAllListeners("plotly_doubleclick");
             this.container.on('plotly_doubleclick', this.props.onDoubleClick);
         }
         if (this.props.onFramework) {
+            this.container.removeAllListeners("plotly_framework");
             this.container.on('plotly_framework', this.props.onFramework);
         }
         if (this.props.onHover) {
+            this.container.removeAllListeners("plotly_hover");
             this.container.on('plotly_hover', this.props.onHover);
         }
         if (this.props.onLegendClick) {
+            this.container.removeAllListeners("plotly_legendclick");
             this.container.on('plotly_legendclick', this.props.onLegendClick);
         }
         if (this.props.onLegendDoubleClick) {
+            this.container.removeAllListeners("plotly_legenddoubleclick");
             this.container.on('plotly_legenddoubleclick', this.props.onLegendDoubleClick);
         }
         if (this.props.onRelayout) {
+            this.container.removeAllListeners("plotly_relayout");
             this.container.on('plotly_relayout', this.props.onRelayout);
         }
         if (this.props.onRestyle) {
+            this.container.removeAllListeners("plotly_restyle");
             this.container.on('plotly_restyle', this.props.onRestyle);
         }
         if (this.props.onRedraw) {
+            this.container.removeAllListeners("plotly_redraw");
             this.container.on('plotly_redraw', this.props.onRedraw);
         }
         if (this.props.onSelecting) {
+            this.container.removeAllListeners("plotly_selecting");
             this.container.on('plotly_selecting', this.props.onSelecting);
         }
         if (this.props.onSliderChange) {
+            this.container.removeAllListeners("plotly_sliderchange");
             this.container.on('plotly_sliderchange', this.props.onSliderChange);
         }
         if (this.props.onSliderEnd) {
+            this.container.removeAllListeners("plotly_sliderend");
             this.container.on('plotly_sliderend', this.props.onSliderEnd);
         }
         if (this.props.onSliderStart) {
+            this.container.removeAllListeners("plotly_sliderstart");
             this.container.on('plotly_sliderstart', this.props.onSliderStart);
         }
         if (this.props.onTransitioning) {
+            this.container.removeAllListeners("plotly_transitioning");
             this.container.on('plotly_transitioning', this.props.onTransitioning);
         }
         if (this.props.onTransitionInterrupted) {
+            this.container.removeAllListeners("plotly_transitioninterrupted");
             this.container.on('plotly_transitioninterrupted', this.props.onTransitionInterrupted);
         }
         if (this.props.onUnHover) {
+            this.container.removeAllListeners("plotly_unhover");
             this.container.on('plotly_unhover', this.props.onUnHover);
         }
         if (this.props.onEvent) {
+            this.container.removeAllListeners("plotly_event");
             this.container.on('plotly_event', this.props.onEvent);
         }
         window.addEventListener('resize', this.resize);
diff --git a/src/index.tsx b/src/index.tsx
@@ -73,60 +73,79 @@ class PlotlyChart extends React.Component<IPlotlyChartProps, any> {
     //   this.container!.on('plotly_buttonclicked', this.props.onButtonClicked);
     // }
     if (this.props.onClick) {
+      this.container!.removeAllListeners("plotly_click");
       this.container!.on('plotly_click', this.props.onClick);
     }
     if (this.props.onClickAnnotation) {
+      this.container!.removeAllListeners("plotly_clickannotation");
       this.container!.on('plotly_clickannotation', this.props.onClickAnnotation);
     }
     if (this.props.onDeselect) {
+        this.container!.removeAllListeners("plotly_deselect");
       this.container!.on('plotly_deselect', this.props.onDeselect);
     }
     if (this.props.onDoubleClick) {
+        this.container!.removeAllListeners("plotly_doubleclick");
       this.container!.on('plotly_doubleclick', this.props.onDoubleClick);
     }
     if (this.props.onFramework) {
+        this.container!.removeAllListeners("plotly_framework");
       this.container!.on('plotly_framework', this.props.onFramework);
     }
     if (this.props.onHover) {
+        this.container!.removeAllListeners("plotly_hover");
       this.container!.on('plotly_hover', this.props.onHover);
     }
     if (this.props.onLegendClick) {
+        this.container!.removeAllListeners("plotly_legendclick");
       this.container!.on('plotly_legendclick', this.props.onLegendClick);
     }
     if (this.props.onLegendDoubleClick) {
+        this.container!.removeAllListeners("plotly_legenddoubleclick");
       this.container!.on('plotly_legenddoubleclick', this.props.onLegendDoubleClick);
     }
     if (this.props.onRelayout) {
+        this.container!.removeAllListeners("plotly_relayout");
       this.container!.on('plotly_relayout', this.props.onRelayout);
     }
     if (this.props.onRestyle) {
+        this.container!.removeAllListeners("plotly_restyle");
       this.container!.on('plotly_restyle', this.props.onRestyle);
     }
     if (this.props.onRedraw) {
+        this.container!.removeAllListeners("plotly_redraw");
       this.container!.on('plotly_redraw', this.props.onRedraw);
     }
     if (this.props.onSelecting) {
+        this.container!.removeAllListeners("plotly_selecting");
       this.container!.on('plotly_selecting', this.props.onSelecting);
     }
     if (this.props.onSliderChange) {
+        this.container!.removeAllListeners("plotly_sliderchange");
       this.container!.on('plotly_sliderchange', this.props.onSliderChange);
     }
     if (this.props.onSliderEnd) {
+        this.container!.removeAllListeners("plotly_sliderend");
       this.container!.on('plotly_sliderend', this.props.onSliderEnd);
     }
     if (this.props.onSliderStart) {
+        this.container!.removeAllListeners("plotly_sliderstart");
       this.container!.on('plotly_sliderstart', this.props.onSliderStart);
     }
     if (this.props.onTransitioning) {
+        this.container!.removeAllListeners("plotly_transitioning");
       this.container!.on('plotly_transitioning', this.props.onTransitioning);
     }
     if (this.props.onTransitionInterrupted) {
+        this.container!.removeAllListeners("plotly_transitioninterrupted");
       this.container!.on('plotly_transitioninterrupted', this.props.onTransitionInterrupted);
     }
     if (this.props.onUnHover) {
+        this.container!.removeAllListeners("plotly_unhover");
       this.container!.on('plotly_unhover', this.props.onUnHover);
     }
     if (this.props.onEvent) {
+        this.container!.removeAllListeners("plotly_event");
       this.container!.on('plotly_event', this.props.onEvent);
     }
     window.addEventListener('resize', this.resize);
@@ -210,4 +229,4 @@ class PlotlyChart extends React.Component<IPlotlyChartProps, any> {
   }
 }
 
-export default PlotlyChart;
+export default PlotlyChart;

Original file line number	Diff line number	Diff line change
`@@ -136,60 +136,79 @@ var PlotlyChart = /** @class */ (function (_super) {`
`136`	`136`	`// this.container!.on('plotly_buttonclicked', this.props.onButtonClicked);`
`137`	`137`	`// }`
`138`	`138`	`if (this.props.onClick) {`
	`139`	`+ this.container.removeAllListeners("plotly_click");`
`139`	`140`	`this.container.on('plotly_click', this.props.onClick);`
`140`	`141`	`}`
`141`	`142`	`if (this.props.onClickAnnotation) {`
	`143`	`+ this.container.removeAllListeners("plotly_clickannotation");`
`142`	`144`	`this.container.on('plotly_clickannotation', this.props.onClickAnnotation);`
`143`	`145`	`}`
`144`	`146`	`if (this.props.onDeselect) {`
	`147`	`+ this.container.removeAllListeners("plotly_deselect");`
`145`	`148`	`this.container.on('plotly_deselect', this.props.onDeselect);`
`146`	`149`	`}`
`147`	`150`	`if (this.props.onDoubleClick) {`
	`151`	`+ this.container.removeAllListeners("plotly_doubleclick");`
`148`	`152`	`this.container.on('plotly_doubleclick', this.props.onDoubleClick);`
`149`	`153`	`}`
`150`	`154`	`if (this.props.onFramework) {`
	`155`	`+ this.container.removeAllListeners("plotly_framework");`
`151`	`156`	`this.container.on('plotly_framework', this.props.onFramework);`
`152`	`157`	`}`
`153`	`158`	`if (this.props.onHover) {`
	`159`	`+ this.container.removeAllListeners("plotly_hover");`
`154`	`160`	`this.container.on('plotly_hover', this.props.onHover);`
`155`	`161`	`}`
`156`	`162`	`if (this.props.onLegendClick) {`
	`163`	`+ this.container.removeAllListeners("plotly_legendclick");`
`157`	`164`	`this.container.on('plotly_legendclick', this.props.onLegendClick);`
`158`	`165`	`}`
`159`	`166`	`if (this.props.onLegendDoubleClick) {`
	`167`	`+ this.container.removeAllListeners("plotly_legenddoubleclick");`
`160`	`168`	`this.container.on('plotly_legenddoubleclick', this.props.onLegendDoubleClick);`
`161`	`169`	`}`
`162`	`170`	`if (this.props.onRelayout) {`
	`171`	`+ this.container.removeAllListeners("plotly_relayout");`
`163`	`172`	`this.container.on('plotly_relayout', this.props.onRelayout);`
`164`	`173`	`}`
`165`	`174`	`if (this.props.onRestyle) {`
	`175`	`+ this.container.removeAllListeners("plotly_restyle");`
`166`	`176`	`this.container.on('plotly_restyle', this.props.onRestyle);`
`167`	`177`	`}`
`168`	`178`	`if (this.props.onRedraw) {`
	`179`	`+ this.container.removeAllListeners("plotly_redraw");`
`169`	`180`	`this.container.on('plotly_redraw', this.props.onRedraw);`
`170`	`181`	`}`
`171`	`182`	`if (this.props.onSelecting) {`
	`183`	`+ this.container.removeAllListeners("plotly_selecting");`
`172`	`184`	`this.container.on('plotly_selecting', this.props.onSelecting);`
`173`	`185`	`}`
`174`	`186`	`if (this.props.onSliderChange) {`
	`187`	`+ this.container.removeAllListeners("plotly_sliderchange");`
`175`	`188`	`this.container.on('plotly_sliderchange', this.props.onSliderChange);`
`176`	`189`	`}`
`177`	`190`	`if (this.props.onSliderEnd) {`
	`191`	`+ this.container.removeAllListeners("plotly_sliderend");`
`178`	`192`	`this.container.on('plotly_sliderend', this.props.onSliderEnd);`
`179`	`193`	`}`
`180`	`194`	`if (this.props.onSliderStart) {`
	`195`	`+ this.container.removeAllListeners("plotly_sliderstart");`
`181`	`196`	`this.container.on('plotly_sliderstart', this.props.onSliderStart);`
`182`	`197`	`}`
`183`	`198`	`if (this.props.onTransitioning) {`
	`199`	`+ this.container.removeAllListeners("plotly_transitioning");`
`184`	`200`	`this.container.on('plotly_transitioning', this.props.onTransitioning);`
`185`	`201`	`}`
`186`	`202`	`if (this.props.onTransitionInterrupted) {`
	`203`	`+ this.container.removeAllListeners("plotly_transitioninterrupted");`
`187`	`204`	`this.container.on('plotly_transitioninterrupted', this.props.onTransitionInterrupted);`
`188`	`205`	`}`
`189`	`206`	`if (this.props.onUnHover) {`
	`207`	`+ this.container.removeAllListeners("plotly_unhover");`
`190`	`208`	`this.container.on('plotly_unhover', this.props.onUnHover);`
`191`	`209`	`}`
`192`	`210`	`if (this.props.onEvent) {`
	`211`	`+ this.container.removeAllListeners("plotly_event");`
`193`	`212`	`this.container.on('plotly_event', this.props.onEvent);`
`194`	`213`	`}`
`195`	`214`	`window.addEventListener('resize', this.resize);`
Original file line number	Diff line number	Diff line change
`@@ -73,60 +73,79 @@ class PlotlyChart extends React.Component<IPlotlyChartProps, any> {`
`73`	`73`	`// this.container!.on('plotly_buttonclicked', this.props.onButtonClicked);`
`74`	`74`	`// }`
`75`	`75`	`if (this.props.onClick) {`
	`76`	`+ this.container!.removeAllListeners("plotly_click");`
`76`	`77`	`this.container!.on('plotly_click', this.props.onClick);`
`77`	`78`	`}`
`78`	`79`	`if (this.props.onClickAnnotation) {`
	`80`	`+ this.container!.removeAllListeners("plotly_clickannotation");`
`79`	`81`	`this.container!.on('plotly_clickannotation', this.props.onClickAnnotation);`
`80`	`82`	`}`
`81`	`83`	`if (this.props.onDeselect) {`
	`84`	`+ this.container!.removeAllListeners("plotly_deselect");`
`82`	`85`	`this.container!.on('plotly_deselect', this.props.onDeselect);`
`83`	`86`	`}`
`84`	`87`	`if (this.props.onDoubleClick) {`
	`88`	`+ this.container!.removeAllListeners("plotly_doubleclick");`
`85`	`89`	`this.container!.on('plotly_doubleclick', this.props.onDoubleClick);`
`86`	`90`	`}`
`87`	`91`	`if (this.props.onFramework) {`
	`92`	`+ this.container!.removeAllListeners("plotly_framework");`
`88`	`93`	`this.container!.on('plotly_framework', this.props.onFramework);`
`89`	`94`	`}`
`90`	`95`	`if (this.props.onHover) {`
	`96`	`+ this.container!.removeAllListeners("plotly_hover");`
`91`	`97`	`this.container!.on('plotly_hover', this.props.onHover);`
`92`	`98`	`}`
`93`	`99`	`if (this.props.onLegendClick) {`
	`100`	`+ this.container!.removeAllListeners("plotly_legendclick");`
`94`	`101`	`this.container!.on('plotly_legendclick', this.props.onLegendClick);`
`95`	`102`	`}`
`96`	`103`	`if (this.props.onLegendDoubleClick) {`
	`104`	`+ this.container!.removeAllListeners("plotly_legenddoubleclick");`
`97`	`105`	`this.container!.on('plotly_legenddoubleclick', this.props.onLegendDoubleClick);`
`98`	`106`	`}`
`99`	`107`	`if (this.props.onRelayout) {`
	`108`	`+ this.container!.removeAllListeners("plotly_relayout");`
`100`	`109`	`this.container!.on('plotly_relayout', this.props.onRelayout);`
`101`	`110`	`}`
`102`	`111`	`if (this.props.onRestyle) {`
	`112`	`+ this.container!.removeAllListeners("plotly_restyle");`
`103`	`113`	`this.container!.on('plotly_restyle', this.props.onRestyle);`
`104`	`114`	`}`
`105`	`115`	`if (this.props.onRedraw) {`
	`116`	`+ this.container!.removeAllListeners("plotly_redraw");`
`106`	`117`	`this.container!.on('plotly_redraw', this.props.onRedraw);`
`107`	`118`	`}`
`108`	`119`	`if (this.props.onSelecting) {`
	`120`	`+ this.container!.removeAllListeners("plotly_selecting");`
`109`	`121`	`this.container!.on('plotly_selecting', this.props.onSelecting);`
`110`	`122`	`}`
`111`	`123`	`if (this.props.onSliderChange) {`
	`124`	`+ this.container!.removeAllListeners("plotly_sliderchange");`
`112`	`125`	`this.container!.on('plotly_sliderchange', this.props.onSliderChange);`
`113`	`126`	`}`
`114`	`127`	`if (this.props.onSliderEnd) {`
	`128`	`+ this.container!.removeAllListeners("plotly_sliderend");`
`115`	`129`	`this.container!.on('plotly_sliderend', this.props.onSliderEnd);`
`116`	`130`	`}`
`117`	`131`	`if (this.props.onSliderStart) {`
	`132`	`+ this.container!.removeAllListeners("plotly_sliderstart");`
`118`	`133`	`this.container!.on('plotly_sliderstart', this.props.onSliderStart);`
`119`	`134`	`}`
`120`	`135`	`if (this.props.onTransitioning) {`
	`136`	`+ this.container!.removeAllListeners("plotly_transitioning");`
`121`	`137`	`this.container!.on('plotly_transitioning', this.props.onTransitioning);`
`122`	`138`	`}`
`123`	`139`	`if (this.props.onTransitionInterrupted) {`
	`140`	`+ this.container!.removeAllListeners("plotly_transitioninterrupted");`
`124`	`141`	`this.container!.on('plotly_transitioninterrupted', this.props.onTransitionInterrupted);`
`125`	`142`	`}`
`126`	`143`	`if (this.props.onUnHover) {`
	`144`	`+ this.container!.removeAllListeners("plotly_unhover");`
`127`	`145`	`this.container!.on('plotly_unhover', this.props.onUnHover);`
`128`	`146`	`}`
`129`	`147`	`if (this.props.onEvent) {`
	`148`	`+ this.container!.removeAllListeners("plotly_event");`
`130`	`149`	`this.container!.on('plotly_event', this.props.onEvent);`
`131`	`150`	`}`
`132`	`151`	`window.addEventListener('resize', this.resize);`
`@@ -210,4 +229,4 @@ class PlotlyChart extends React.Component<IPlotlyChartProps, any> {`
`210`	`229`	`}`
`211`	`230`	`}`
`212`	`231`
`213`		`-export default PlotlyChart;`
	`232`	`+export default PlotlyChart;`