fix(): avoid resize loop limit exceeded

Fix #254

e2e/resize-loop.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react'
+import * as ReactDOM from 'react-dom'
+import { Virtuoso } from '../src/'
+
+window.addEventListener('error', event => {
+  console.log(event)
+})
+
+const ResizingDiv = ({ children }) => {
+  const [height, setHeight] = React.useState(60)
+  React.useEffect(() => {
+    setHeight(() => 120)
+  }, [])
+  return <div style={{ height, transition: 'all 0.5s linear', border: '1px solid blue' }}>{children}</div>
+}
+
+const App = () => {
+  return <Virtuoso totalCount={100} itemContent={index => <ResizingDiv>Item {index}</ResizingDiv>} style={{ height: 300 }} />
+}
+
+ReactDOM.render(<App />, document.getElementById('root'))

src/hooks/useSize.ts

@@ -7,12 +7,16 @@ export default function useSize(callback: (e: HTMLElement) => void, enabled: boo
   const ref = useRef<CallbackRefParam>(null)
   const observer = new ResizeObserver(entries => {
     const element = entries[0].target as HTMLElement
-    // if display: none, the element won't have an offsetParent
-    // measuring it at this mode is not going to work
-    // https://stackoverflow.com/a/21696585/1009797
-    if (element.offsetParent !== null) {
-      callback(element)
-    }
+    // Avoid Resize loop limit exceeded error
+    // https://github.com/edunad/react-virtuoso/commit/581d4558f2994adea375291b76fe59605556c08f
+    requestAnimationFrame(() => {
+      // if display: none, the element won't have an offsetParent
+      // measuring it at this mode is not going to work
+      // https://stackoverflow.com/a/21696585/1009797
+      if (element.offsetParent !== null) {
+        callback(element)
+      }
+    })
   })
 
   const callbackRef = (elRef: CallbackRefParam) => {