fix(useViewportSize): update size after hydration (adobe#8966)

* fix(useViewportSize): update size after hydration

* fix import order

* fix(useViewportSize): update size within the useEffect unconditionally

---------

Co-authored-by: Robert Snow <rsnow@adobe.com>

Author: ali-idrizi

packages/@react-aria/utils/src/useViewportSize.ts

@@ -26,20 +26,23 @@ export function useViewportSize(): ViewportSize {
   let [size, setSize] = useState(() => isSSR ? {width: 0, height: 0} : getViewportSize());
 
   useEffect(() => {
+    let updateSize = (newSize: ViewportSize) => {
+      setSize(size => {
+        if (newSize.width === size.width && newSize.height === size.height) {
+          return size;
+        }
+        return newSize;
+      });
+    };
+
     // Use visualViewport api to track available height even on iOS virtual keyboard opening
     let onResize = () => {
       // Ignore updates when zoomed.
       if (visualViewport && visualViewport.scale > 1) {
         return;
       }
 
-      setSize(size => {
-        let newSize = getViewportSize();
-        if (newSize.width === size.width && newSize.height === size.height) {
-          return size;
-        }
-        return newSize;
-      });
+      updateSize(getViewportSize());
     };
 
     // When closing the keyboard, iOS does not fire the visual viewport resize event until the animation is complete.
@@ -54,18 +57,14 @@ export function useViewportSize(): ViewportSize {
         // Wait one frame to see if a new element gets focused.
         frame = requestAnimationFrame(() => {
           if (!document.activeElement || !willOpenKeyboard(document.activeElement)) {
-            setSize(size => {
-              let newSize = {width: window.innerWidth, height: window.innerHeight};
-              if (newSize.width === size.width && newSize.height === size.height) {
-                return size;
-              }
-              return newSize;
-            });
+            updateSize({width: window.innerWidth, height: window.innerHeight});
           }
         });
       }
     };
 
+    updateSize(getViewportSize());
+
     window.addEventListener('blur', onBlur, true);
 
     if (!visualViewport) {

packages/@react-aria/utils/test/useViewportSize.ssr.test.tsx

@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {testSSR} from '@react-spectrum/test-utils-internal';
+import {screen, testSSR} from '@react-spectrum/test-utils-internal';
 
 describe('useViewportSize SSR', () => {
   it('should render without errors', async () => {
@@ -25,4 +25,21 @@ describe('useViewportSize SSR', () => {
       <Viewport />
     `);
   });
+
+  it('should update dimensions after hydration', async () => {
+    await testSSR(__filename, `
+      import {useViewportSize} from '../src';
+
+      function Viewport() {
+        let size = useViewportSize();
+        return <div data-testid="viewport">{size.width}x{size.height}</div>;
+      }
+
+      <Viewport />
+    `, () => {
+      expect(screen.getByTestId('viewport')).toHaveTextContent('0x0');
+    });
+
+    expect(screen.getByTestId('viewport')).not.toHaveTextContent('0x0');
+  });
 });