[Slider] fix memory leaks

Author: eps1lon

packages/material-ui-lab/src/Slider/Slider.js

@@ -142,6 +142,10 @@ function addEventListener(node, event, handler, capture) {
     },
   };
 }
+// mock return value of addEventListener with noop; used as default
+const noopEventListener = {
+  remove: () => {},
+};
 
 function percentToValue(percent, min, max) {
   return ((max - min) * percent) / 100 + min;
@@ -198,6 +202,12 @@ if (process.env.NODE_ENV !== 'production' && !React.createContext) {
 class Slider extends React.Component {
   state = { currentState: 'initial' };
 
+  globalMouseMoveListener = noopEventListener;
+
+  globalMouseUpListener = noopEventListener;
+
+  jumpAnimationTimeoutId = -1;
+
   componentDidMount() {
     if (this.containerRef) {
       this.containerRef.addEventListener('touchstart', preventPageScrolling, { passive: false });
@@ -206,6 +216,9 @@ class Slider extends React.Component {
 
   componentWillUnmount() {
     this.containerRef.removeEventListener('touchstart', preventPageScrolling, { passive: false });
+    this.globalMouseMoveListener.remove();
+    this.globalMouseUpListener.remove();
+    clearTimeout(this.jumpAnimationTimeoutId);
   }
 
   static getDerivedStateFromProps(nextProps, prevState) {
@@ -303,13 +316,8 @@ class Slider extends React.Component {
   handleMouseUp = event => {
     this.setState({ currentState: 'normal' });
 
-    if (this.globalMouseUpListener) {
-      this.globalMouseUpListener.remove();
-    }
-
-    if (this.globalMouseMoveListener) {
-      this.globalMouseMoveListener.remove();
-    }
+    this.globalMouseMoveListener.remove();
+    this.globalMouseUpListener.remove();
 
     if (typeof this.props.onDragEnd === 'function') {
       this.props.onDragEnd(event);
@@ -373,7 +381,8 @@ class Slider extends React.Component {
 
   playJumpAnimation() {
     this.setState({ currentState: 'jumped' }, () => {
-      setTimeout(() => {
+      clearTimeout(this.jumpAnimationTimeoutId);
+      this.jumpAnimationTimeoutId = setTimeout(() => {
         this.setState({ currentState: 'normal' });
       }, this.props.theme.transitions.duration.complex);
     });

packages/material-ui-lab/src/Slider/Slider.test.js

@@ -55,6 +55,24 @@ describe('<Slider />', () => {
     assert.strictEqual(handleDragEnd.callCount, 1, 'should have called the handleDragEnd cb');
   });
 
+  it('should not cause leaks', () => {
+    const wrapper = mount(<Slider value={0} />);
+
+    wrapper.simulate('mousedown');
+    wrapper.unmount();
+
+    // would cause errors because we try to access refs that are null
+    const mousemoveEvent = document.createEvent('HTMLEvents');
+    mousemoveEvent.initEvent('mousemove', false, true);
+    document.dispatchEvent(mousemoveEvent);
+
+    // if we did not remove the global event listener react will throw a warning
+    // because we called setState on an unmounted component
+    const mouseupEvent = document.createEvent('HTMLEvents');
+    mouseupEvent.initEvent('mouseup', false, true);
+    document.dispatchEvent(mouseupEvent);
+  });
+
   describe('prop: vertical', () => {
     it('should render with the default and vertical classes', () => {
       const wrapper = shallow(<Slider vertical value={0} />);