react-cool-dimensions: ResizeObserver loop limit exceeded

@rfgamaral I think this bug only leaves in old versions.

We have logs from the latest browser versions, so I don’t think this only happens on old versions.

Should we still need to care about it?

In my opinion, yes.

Everyone that uses this library with some logging service (like Sentry) will probably come across this “issue”. And I say “issue” because it’s not really affecting functionality (as far as we know), but we have around 34k events affecting 18k users on this “issue” alone. We could ignore it on our system, but based on the links I posted above, this should be easily fixable.

I understand that without reproducing it, it’s hard to understand if we are actually fixing anything. And I can’t reproduce it myself either, so the best I could do is try to deploy a version with a similar fix to the ones mentioned above, and see if the logs start to go away.

Yes I did, @wellyshen, thanks for catching that 😅

Just updated our internal PR 😊

@rfgamaral For our case, we don’t need to use the ref, it costs more bundle size.

@rfgamaral Thank you that will be great. For now, I think the only issue is the lack of a reproduce environment to validate whether the solution is workable or not.

FYI, this is the patch I’m going to apply on our side:

diff --git a/node_modules/react-cool-dimensions/dist/index.esm.js b/node_modules/react-cool-dimensions/dist/index.esm.js
index 55a9b01..9b66260 100644
--- a/node_modules/react-cool-dimensions/dist/index.esm.js
+++ b/node_modules/react-cool-dimensions/dist/index.esm.js
@@ -61,6 +61,7 @@ var useDimensions = function useDimensions(_temp) {
   var warnedRef = useRef(false);
   var refVar = useRef(null);
   var ref = useRef(refVar == null ? void 0 : refVar.current);
+  var animationFrameRef = useRef()
   ref = refOpt || ref;
   useEffect(function () {
     if (onResize) onResizeRef.current = onResize;
@@ -138,16 +139,23 @@ var useDimensions = function useDimensions(_temp) {
       if (shouldUpdateRef.current && !shouldUpdateRef.current(next)) return;
 
       if (!shouldUpdateRef.current && breakpoints && updateOnBreakpointChange) {
-        setState(function (prev) {
-          return prev.currentBreakpoint !== next.currentBreakpoint ? next : prev;
+        animationFrameRef.current = requestAnimationFrame(function () {
+          setState(function (prev) {
+            return prev.currentBreakpoint !== next.currentBreakpoint ? next : prev;
+          });
         });
         return;
       }
 
-      setState(next);
+      animationFrameRef.current = requestAnimationFrame(function () {
+        setState(next)
+      });
     });
     observe();
     return function () {
+      if (animationFrameRef.current) {
+        cancelAnimationFrame(animationFrameRef.current)
+      }
       return unobserve();
     }; // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [// eslint-disable-next-line react-hooks/exhaustive-deps

I’ll report back a few days after deploying this to production, and if it works, I’ll open a PR with the fix 😃

@rfgamaral Sorry I’m busying for a new library, will reproduce it tomorrow XD