Fixes memory leak.

Author: ctrlplusb

src/__tests__/sizeMe.test.js

@@ -58,7 +58,7 @@ describe('Given the SizeMe library', () => {
   beforeEach(() => {
     resizeDetectorMock = {
       // :: domEl -> void
-      removeAllListeners: jest.fn(),
+      uninstall: jest.fn(),
       // :: (domeEl, callback) -> void
       listenTo: jest.fn(),
     }
@@ -160,12 +160,12 @@ describe('Given the SizeMe library', () => {
       const mounted = mount(<SizeAwareComponent />)
 
       expect(resizeDetectorMock.listenTo).toHaveBeenCalledTimes(1)
-      expect(resizeDetectorMock.removeAllListeners).toHaveBeenCalledTimes(0)
+      expect(resizeDetectorMock.uninstall).toHaveBeenCalledTimes(0)
 
       mounted.unmount()
 
       expect(resizeDetectorMock.listenTo).toHaveBeenCalledTimes(1)
-      expect(resizeDetectorMock.removeAllListeners).toHaveBeenCalledTimes(1)
+      expect(resizeDetectorMock.uninstall).toHaveBeenCalledTimes(1)
     })
   })
 
@@ -212,7 +212,7 @@ describe('Given the SizeMe library', () => {
 
       // An add listener should have been called for the placeholder.
       expect(resizeDetectorMock.listenTo).toHaveBeenCalledTimes(1)
-      expect(resizeDetectorMock.removeAllListeners).toHaveBeenCalledTimes(0)
+      expect(resizeDetectorMock.uninstall).toHaveBeenCalledTimes(0)
 
       // Get the callback for size changes.
       const checkIfSizeChangedCallback =
@@ -229,14 +229,14 @@ describe('Given the SizeMe library', () => {
       // on the newly mounted component.
       expect(mounted.text()).toEqual(expected({ width: 100, height: 50 }))
       expect(resizeDetectorMock.listenTo).toHaveBeenCalledTimes(2)
-      expect(resizeDetectorMock.removeAllListeners).toHaveBeenCalledTimes(1)
+      expect(resizeDetectorMock.uninstall).toHaveBeenCalledTimes(1)
 
       // umount
       mounted.unmount()
 
       // The remove listener should have been called!
       expect(resizeDetectorMock.listenTo).toHaveBeenCalledTimes(2)
-      expect(resizeDetectorMock.removeAllListeners).toHaveBeenCalledTimes(2)
+      expect(resizeDetectorMock.uninstall).toHaveBeenCalledTimes(2)
     })
   })
 

src/resizeDetector.js

@@ -1,17 +1,17 @@
 import createResizeDetector from 'element-resize-detector'
 
-let instance
+const instances = {}
 
 // Lazily require to not cause bug
 // https://github.com/ctrlplusb/react-sizeme/issues/6
 function resizeDetector(strategy = 'scroll') {
-  if (!instance) {
-    instance = createResizeDetector({
+  if (!instances[strategy]) {
+    instances[strategy] = createResizeDetector({
       strategy,
     })
   }
 
-  return instance
+  return instances[strategy]
 }
 
 export default resizeDetector

src/sizeMe.js

@@ -168,6 +168,8 @@ function sizeMe(config = defaultConfig) {
 
   const refreshDelayStrategy = refreshMode === 'throttle' ? throttle : debounce
 
+  const detector = resizeDetector(resizeDetectorStrategy)
+
   return function WrapComponent(WrappedComponent) {
     const SizeMeRenderWrapper = renderWrapper(WrappedComponent)
 
@@ -204,7 +206,7 @@ function sizeMe(config = defaultConfig) {
         this.checkIfSizeChanged = () => undefined
 
         if (this.domEl) {
-          resizeDetector(resizeDetectorStrategy).removeAllListeners(this.domEl)
+          detector.uninstall(this.domEl)
           this.domEl = null
         }
       }
@@ -244,23 +246,18 @@ function sizeMe(config = defaultConfig) {
         if (!found) {
           // This is for special cases where the element may be null.
           if (this.domEl) {
-            resizeDetector(resizeDetectorStrategy).removeAllListeners(
-              this.domEl,
-            )
+            detector.uninstall(this.domEl)
             this.domEl = null
           }
           return
         }
 
         if (this.domEl) {
-          resizeDetector(resizeDetectorStrategy).removeAllListeners(this.domEl)
+          detector.uninstall(this.domEl)
         }
 
         this.domEl = found
-        resizeDetector(resizeDetectorStrategy).listenTo(
-          this.domEl,
-          this.checkIfSizeChanged,
-        )
+        detector.listenTo(this.domEl, this.checkIfSizeChanged)
       }
 
       refCallback = element => {