Merge pull request #287 from alexxanderlee/fix/use-element-size-hook

Fix useElementSize hook

Author: debabin

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();

src/hooks/useRefState/useRefState.ts

@@ -10,17 +10,21 @@ export interface StateRef<Value> {
 const createRefState = <Value>(initialValue: Value | undefined, rerender: () => void) => {
   let temp = initialValue;
   function ref(value: Value) {
-    temp = value;
-    rerender();
+    if (temp !== value) {
+      temp = value;
+      rerender();
+    }
   }
 
   Object.defineProperty(ref, 'current', {
     get() {
       return temp;
     },
     set(value: Value) {
-      rerender();
-      temp = value;
+      if (temp !== value) {
+        temp = value;
+        rerender();
+      }
     },
     configurable: true,
     enumerable: true