call setState within requestAnimationFrame to prevent inifinite loop

Fixes souporserious#104
yoadsn · Nov 14, 2018 · 9354ea7 · 9354ea7
1 parent eb34467
commit 9354ea7
Showing 1 changed file with 8 additions and 2 deletions.
diff --git a/src/with-content-rect.js b/src/with-content-rect.js
@@ -30,13 +30,15 @@ function withContentRect(types) {
 
       componentWillMount() {
         this._resizeObserver = new ResizeObserver(this.measure)
+        this.animationFrameID = null;
       }
 
       componentWillUnmount() {
         if (this._resizeObserver && this._node) {
           this._resizeObserver.disconnect(this._node);
         }
         this._resizeObserver = null;
+        window.cancelAnimationFrame(this.animationFrameID);
       }
 
       measure = entries => {
@@ -49,8 +51,12 @@ function withContentRect(types) {
           contentRect.entry = entries[0].contentRect
         }
 
-        this.setState({ contentRect })
-
+        this.animationFrameID = window.requestAnimationFrame(() => {
+          if (this._resizeObserver) {
+            this.setState({ contentRect })
+          }
+        })
+
         if (typeof this.props.onResize === 'function') {
           this.props.onResize(contentRect)
         }