Update layout when content size changes might cause scrollbars to appear or disappear

Author: devongovett

.eslintrc.js

@@ -120,7 +120,8 @@ module.exports = {
     'AsyncIterable': 'readonly',
     'FileSystemFileEntry': 'readonly',
     'FileSystemDirectoryEntry': 'readonly',
-    'FileSystemEntry': 'readonly'
+    'FileSystemEntry': 'readonly',
+    'globalThis': 'readonly'
   },
   settings: {
     jsdoc: {

packages/@react-aria/virtualizer/src/ScrollView.tsx

@@ -143,12 +143,17 @@ export function useScrollView(props: ScrollViewProps, ref: RefObject<HTMLElement
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  let isUpdatingSize = useRef(false);
   let updateSize = useEffectEvent((flush: typeof flushSync) => {
     let dom = ref.current;
-    if (!dom) {
+    if (!dom && !isUpdatingSize.current) {
       return;
     }
 
+    // Prevent reentrancy when resize observer fires, triggers re-layout that results in
+    // content size update, causing below layout effect to fire. This avoids infinite loops.
+    isUpdatingSize.current = true;
+
     let isTestEnv = process.env.NODE_ENV === 'test' && !process.env.VIRT_ON;
     let isClientWidthMocked = Object.getOwnPropertyNames(window.HTMLElement.prototype).includes('clientWidth');
     let isClientHeightMocked = Object.getOwnPropertyNames(window.HTMLElement.prototype).includes('clientHeight');
@@ -177,27 +182,38 @@ export function useScrollView(props: ScrollViewProps, ref: RefObject<HTMLElement
         });
       }
     }
+
+    isUpdatingSize.current = false;
   });
 
-  let didUpdateSize = useRef(false);
+  // Update visible rect when the content size changes, in case scrollbars need to appear or disappear.
+  let lastContentSize = useRef<Size | null>(null);
   useLayoutEffect(() => {
-    // React doesn't allow flushSync inside effects, so queue a microtask.
-    // We also need to wait until all refs are set (e.g. when passing a ref down from a parent).
-    queueMicrotask(() => {
-      if (!didUpdateSize.current) {
-        didUpdateSize.current = true;
-        updateSize(flushSync);
+    if (!isUpdatingSize.current) {
+      // Detect when scrollbar state might have changed.
+      let prevShowX = lastContentSize.current?.width > state.width;
+      let prevShowY = lastContentSize.current?.height > state.height;
+      let curShowX = contentSize.width > state.width;
+      let curShowY = contentSize.height > state.height;
+
+      if (lastContentSize.current && prevShowX === curShowX && prevShowY === curShowY) {
+        return;
+      }
+
+      // React doesn't allow flushSync inside effects, so queue a microtask.
+      // We also need to wait until all refs are set (e.g. when passing a ref down from a parent).
+      // If we are in an `act` environment, update immediately without a microtask so you don't need
+      // to mock timers in tests. In this case, the update is synchronous already.
+      if (globalThis.IS_REACT_ACT_ENVIRONMENT) {
+        updateSize(fn => fn());
+      } else {
+        queueMicrotask(() => updateSize(flushSync));
       }
-    });
-  }, [updateSize]);
-  useEffect(() => {
-    if (!didUpdateSize.current) {
-      // If useEffect ran before the above microtask, we are in a synchronous render (e.g. act).
-      // Update the size here so that you don't need to mock timers in tests.
-      didUpdateSize.current = true;
-      updateSize(fn => fn());
     }
-  }, [updateSize]);
+
+    lastContentSize.current = contentSize;
+  });
+
   let onResize = useCallback(() => {
     updateSize(flushSync);
   }, [updateSize]);