From 1895d7058eb8070ac647fffed897c87c712a9d6c Mon Sep 17 00:00:00 2001
From: Rob Snow <rsnow@adobe.com>
Date: Wed, 15 Mar 2023 18:22:34 +1100
Subject: [PATCH] Revert Fix useResizeObserver loop limit exceeded warning
 (#2891)

---
 .../utils/src/useResizeObserver.ts            | 22 ++------
 .../stories/useResizeObserver.stories.tsx     | 55 -------------------
 2 files changed, 5 insertions(+), 72 deletions(-)
 delete mode 100644 packages/@react-aria/utils/stories/useResizeObserver.stories.tsx

diff --git a/packages/@react-aria/utils/src/useResizeObserver.ts b/packages/@react-aria/utils/src/useResizeObserver.ts
index e2cb9530ec2..bb328f26358 100644
--- a/packages/@react-aria/utils/src/useResizeObserver.ts
+++ b/packages/@react-aria/utils/src/useResizeObserver.ts
@@ -1,4 +1,4 @@
-import {RefObject, useEffect, useRef} from 'react';
+import {RefObject, useEffect} from 'react';
 
 function hasResizeObserver() {
   return typeof window.ResizeObserver !== 'undefined';
@@ -11,7 +11,6 @@ type useResizeObserverOptionsType<T> = {
 
 export function useResizeObserver<T extends Element>(options: useResizeObserverOptionsType<T>) {
   const {ref, onResize} = options;
-  let raf = useRef(null);
 
   useEffect(() => {
     let element = ref?.current;
@@ -25,28 +24,17 @@ export function useResizeObserver<T extends Element>(options: useResizeObserverO
         window.removeEventListener('resize', onResize, false);
       };
     } else {
+
       const resizeObserverInstance = new window.ResizeObserver((entries) => {
-        if (raf.current) {
+        if (!entries.length) {
           return;
         }
-        // avoid Error - ResizeObserver loop limit exceeded
-        // it's ok to use a raf, ResizeObservers are already async and now we're just debouncing on frames
-        raf.current = window.requestAnimationFrame(() => {
-          raf.current = null;
-          if (!Array.isArray(entries) || !entries.length) {
-            return;
-          }
-          onResize();
-        });
-      });
 
+        onResize();
+      });
       resizeObserverInstance.observe(element);
 
       return () => {
-        if (raf.current) {
-          window.cancelAnimationFrame(raf.current);
-          raf.current = null;
-        }
         if (element) {
           resizeObserverInstance.unobserve(element);
         }
diff --git a/packages/@react-aria/utils/stories/useResizeObserver.stories.tsx b/packages/@react-aria/utils/stories/useResizeObserver.stories.tsx
deleted file mode 100644
index 7a4a335d77c..00000000000
--- a/packages/@react-aria/utils/stories/useResizeObserver.stories.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-
-import {Button} from '@react-spectrum/button';
-import {Meta, Story} from '@storybook/react';
-import React, {useEffect, useRef, useState} from 'react';
-import {useResizeObserver} from '../src';
-
-export default {
-  title: 'useResizeObserver'
-} as Meta;
-
-const Template: Story<any> = () => (
-  <App />
-);
-
-export const UseResizeObserverLoopLimit = Template.bind({});
-UseResizeObserverLoopLimit.args = {};
-
-const animalSet = ['🐰', '🦊', '🐻', '🐭', '🐼', '🐸'];
-function App() {
-  let ref = useRef<HTMLDivElement>();
-  let index = useRef(0);
-  let [animals, setAnimals] = useState([animalSet[0]]);
-
-  function insertAnimal() {
-    index.current = index.current + 1;
-    setAnimals(prev => [...prev, animalSet[index.current % animalSet.length]]);
-  }
-
-  useEffect(() => {
-    let onError = (err) => {
-      console.log(err);
-    };
-    window.addEventListener('error', onError);
-    return () => {
-      window.removeEventListener('error', onError);
-    };
-  }, []);
-
-  let onResize = () => {
-    const {width} = ref.current.getBoundingClientRect();
-
-    ref.current.style.height = `${width}px`;
-  };
-
-  useResizeObserver({onResize, ref});
-
-  return (
-    <>
-      <div ref={ref} id="red-box">
-        {animals}
-      </div>
-      <Button variant="primary" onPress={insertAnimal}>Insert Next Animal</Button>
-    </>
-  );
-}