main 🧊 rework use element size

Author: debabin

src/hooks/useElementSize/useElementSize.demo.tsx

@@ -7,11 +7,11 @@ const Demo = () => {
     <div className='flex flex-col gap-4'>
       <p>Resize the box to see changes</p>
       <textarea
-        ref={elementSize.ref}
         disabled
+        ref={elementSize.ref}
         className='h-[200px] w-[200px]'
         style={{ resize: 'both' }}
-        value={`width: ${elementSize.value.width}\nheight: ${elementSize.value.height}`}
+        value={`width: ${Math.floor(elementSize.value.width)}\nheight: ${Math.floor(elementSize.value.height)}`}
       />
     </div>
   );

src/hooks/useElementSize/useElementSize.test.ts

@@ -9,6 +9,7 @@ import type { UseElementSizeReturn } from './useElementSize';
 import { useElementSize } from './useElementSize';
 
 const trigger = createTrigger<ResizeObserverCallback, Element>();
+const mockGetBoundingClientRect = vi.spyOn(Element.prototype, 'getBoundingClientRect');
 const mockResizeObserverDisconnect = vi.fn();
 const mockResizeObserverObserve = vi.fn();
 const mockResizeObserver = class ResizeObserver {
@@ -32,7 +33,6 @@ const mockResizeObserver = class ResizeObserver {
 
 beforeEach(() => void vi.stubGlobal('ResizeObserver', mockResizeObserver));
 afterEach(() => void vi.unstubAllGlobals());
-afterEach(() => void vi.restoreAllMocks());
 
 const targets = [
   undefined,
@@ -49,6 +49,7 @@ targets.forEach((target) => {
 
   describe(`${target}`, () => {
     it('Should use element size', () => {
+      mockGetBoundingClientRect.mockImplementation(() => new DOMRect(0, 0, 0, 0));
       const { result } = renderHook(() => {
         if (target)
           return useElementSize(target) as {
@@ -61,19 +62,23 @@ targets.forEach((target) => {
     });
 
     it('Should set initial value', () => {
+      mockGetBoundingClientRect.mockImplementation(() => new DOMRect(0, 0, 200, 200));
       const { result } = renderHook(() => {
-        if (target) return useElementSize(target, { width: 200, height: 200 });
-        return useElementSize<HTMLDivElement>({ width: 200, height: 200 });
+        if (target)
+          return useElementSize(target) as {
+            ref: StateRef<HTMLDivElement>;
+          } & UseElementSizeReturn;
+        return useElementSize<HTMLDivElement>();
       });
 
-      if (!target) {
-        expect(result.current.value).toStrictEqual({ width: 200, height: 200 });
-      } else {
-        expect(result.current.value).toStrictEqual({ width: 0, height: 0 });
-      }
+      if (!target)
+        act(() => result.current.ref(document.getElementById('target')! as HTMLDivElement));
+
+      expect(result.current.value).toStrictEqual({ width: 200, height: 200 });
     });
 
     it('Should change value after resize', () => {
+      mockGetBoundingClientRect.mockImplementation(() => new DOMRect(0, 0, 0, 0));
       const { result } = renderHook(() => {
         if (target)
           return useElementSize(target) as {
@@ -91,20 +96,17 @@ 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)
-        );
+        mockGetBoundingClientRect.mockImplementation(() => new DOMRect(0, 0, 200, 200));
 
-        trigger.callback(element, [
-          { contentRect: { width: 200, height: 200 } }
-        ] as unknown as ResizeObserverEntry[]);
+        trigger.callback(element);
       });
 
       expect(mockResizeObserverObserve).toHaveBeenCalledTimes(1);
       expect(result.current.value).toStrictEqual({ width: 200, height: 200 });
     });
 
     it('Should disconnect on onmount', () => {
+      mockGetBoundingClientRect.mockImplementation(() => new DOMRect(0, 0, 0, 0));
       const { result, unmount } = renderHook(() => {
         if (target)
           return useElementSize(target) as {

src/hooks/useElementSize/useElementSize.ts

@@ -26,13 +26,9 @@ export interface UseElementSizeReturn {
 }
 
 export interface UseElementSize {
-  <Target extends UseElementSizeTarget>(
-    target: Target,
-    initialValue?: UseElementSizeValue
-  ): UseElementSizeReturn;
+  <Target extends UseElementSizeTarget>(target: Target): UseElementSizeReturn;
 
   <Target extends UseElementSizeTarget>(
-    initialValue?: UseElementSizeValue,
     target?: never
   ): { ref: StateRef<Target> } & UseElementSizeReturn;
 }
@@ -45,47 +41,39 @@ export interface UseElementSize {
  * @overload
  * @template Target The target element type
  * @param {UseElementSizeTarget} target The target element to observe
- * @param {UseElementSizeValue} [initialValue] The initial size of the element.
  * @returns {UseElementSizeReturn} An object containing the current width and height of the element
  *
  * @example
  * const { value } = useElementSize(ref);
  *
  * @overload
- * @param {UseElementSizeValue} [initialValue] The initial size of the element
  * @returns { { ref: StateRef<Target> } & UseElementSizeReturn } An object containing the current width and height of the element
  *
  * @example
  * const { ref, value } = 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 UseElementSizeValue | undefined;
-
-  const [size, setSize] = useState(initialValue ?? { width: 0, height: 0 });
+  const [size, setSize] = useState({ width: 0, height: 0 });
   const internalRef = useRefState<Element>();
 
   useIsomorphicLayoutEffect(() => {
     const element = (target ? getElement(target) : internalRef.current) as Element;
 
     if (!element) return;
 
-    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;
-      });
-    };
+    const { width, height } = element.getBoundingClientRect();
+    setSize({
+      width,
+      height
+    });
+
+    const observer = new ResizeObserver(() => {
+      const { width, height } = element.getBoundingClientRect();
+      setSize({ width, height });
+    });
 
-    const observer = new ResizeObserver(callback);
     observer.observe(element);
-    callback();
 
     return () => {
       observer.disconnect();

src/hooks/useRefState/useRefState.test.ts

@@ -56,3 +56,22 @@ it('Should trigger rerender when the value is updated via current property', ()
 
   expect(renderCount).toBe(2);
 });
+
+const values = [1, {}];
+values.forEach((value) => {
+  it(`Should trigger dont rerender when the value ${value} is equal to the current value`, () => {
+    let renderCount = 0;
+    const { result } = renderHook(() => {
+      renderCount++;
+      return useRefState(value);
+    });
+
+    expect(renderCount).toBe(1);
+
+    act(() => {
+      result.current.current = value;
+    });
+
+    expect(renderCount).toBe(1);
+  });
+});

src/hooks/useRefState/useRefState.ts

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