fix(useElementSize): get element correct size + calc element size before browser paint

Author: alexxander-lee

src/hooks/useElementSize/useElementSize.test.ts

@@ -32,6 +32,7 @@ const mockResizeObserver = class ResizeObserver {
 
 beforeEach(() => void vi.stubGlobal('ResizeObserver', mockResizeObserver));
 afterEach(() => void vi.unstubAllGlobals());
+afterEach(() => void vi.restoreAllMocks());
 
 const targets = [
   undefined,
@@ -65,7 +66,11 @@ targets.forEach((target) => {
         return useElementSize<HTMLDivElement>({ width: 200, height: 200 });
       });
 
-      expect(result.current.value).toStrictEqual({ width: 200, height: 200 });
+      if (!target) {
+        expect(result.current.value).toStrictEqual({ width: 200, height: 200 });
+      } else {
+        expect(result.current.value).toStrictEqual({ width: 0, height: 0 });
+      }
     });
 
     it('Should change value after resize', () => {
@@ -86,6 +91,10 @@ targets.forEach((target) => {
         const element = (target ? getElement(target) : result.current.ref.current) as Element;
         if (!element) return;
 
+        vi.spyOn(Element.prototype, 'getBoundingClientRect').mockImplementation(
+          () => new DOMRect(0, 0, 200, 200)
+        );
+
         trigger.callback(element, [
           { contentRect: { width: 200, height: 200 } }
         ] as unknown as ResizeObserverEntry[]);

src/hooks/useElementSize/useElementSize.ts

@@ -1,11 +1,12 @@
 import type { RefObject } from 'react';
 
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 
 import { getElement, isTarget } from '@/utils/helpers';
 
 import type { StateRef } from '../useRefState/useRefState';
 
+import { useIsomorphicLayoutEffect } from '../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect';
 import { useRefState } from '../useRefState/useRefState';
 
 /** The element size value type */
@@ -59,23 +60,32 @@ export interface UseElementSize {
  */
 export const useElementSize = ((...params: any[]) => {
   const target = (isTarget(params[0]) ? params[0] : undefined) as UseElementSizeTarget | undefined;
-  const initialValue = (target ? params[1] : params[0]) as UseElementSizeTarget | undefined;
+  const initialValue = (target ? params[1] : params[0]) as UseElementSizeValue | undefined;
 
   const [size, setSize] = useState(initialValue ?? { width: 0, height: 0 });
   const internalRef = useRefState<Element>();
 
-  useEffect(() => {
-    if (!target && !internalRef.current) return;
+  useIsomorphicLayoutEffect(() => {
     const element = (target ? getElement(target) : internalRef.current) as Element;
 
     if (!element) return;
 
-    const observer = new ResizeObserver(([entry]) => {
-      const { width, height } = entry.contentRect;
-      setSize({ width, height });
-    });
+    const callback = () => {
+      const rect = element.getBoundingClientRect();
+      setSize((prev) => {
+        if (prev.width !== rect.width || prev.height !== rect.height) {
+          return {
+            width: rect.width,
+            height: rect.height
+          };
+        }
+        return prev;
+      });
+    };
 
-    if (element) observer.observe(element);
+    const observer = new ResizeObserver(callback);
+    observer.observe(element);
+    callback();
 
     return () => {
       observer.disconnect();