default width, height to null

Author: sirkrisp

.gitignore

@@ -4,4 +4,6 @@
 node_modules
 dist
 coverage
-.size-snapshot.json
+.size-snapshot.json
+
+.idea

src/__tests__/useDimensions.ts

@@ -43,29 +43,41 @@ describe("useDimensions", () => {
     const { result } = renderHelper();
     expect(observe).not.toHaveBeenCalled();
 
-    result.current.observe();
+    act(() => {
+      result.current.observe();
+    });
     expect(observe).not.toHaveBeenCalled();
   });
 
   it("should return workable observe method", () => {
     const { result } = renderHelper();
-    result.current.observe(target);
+    act(() => {
+      result.current.observe(target);
+    });
     expect(disconnect).toHaveBeenCalledTimes(1);
     expect(observe).toHaveBeenCalledTimes(1);
 
-    result.current.observe();
+    act(() => {
+      result.current.observe();
+    });
     expect(observe).toHaveBeenCalledTimes(2);
   });
 
   it("should not observe repeatedly", () => {
     const { result } = renderHelper();
-    result.current.observe(target);
+    act(() => {
+      result.current.observe(target);
+    });
     expect(disconnect).toHaveBeenCalledTimes(1);
 
-    result.current.observe(target);
+    act(() => {
+      result.current.observe(target);
+    });
     expect(disconnect).toHaveBeenCalledTimes(1);
 
-    result.current.observe(document.createElement("div"));
+    act(() => {
+      result.current.observe(document.createElement("div"));
+    });
     expect(disconnect).toHaveBeenCalledTimes(2);
   });
 
@@ -77,7 +89,9 @@ describe("useDimensions", () => {
 
   it("should return width and height correctly", () => {
     const { result } = renderHelper();
-    result.current.observe(target);
+    act(() => {
+      result.current.observe(target);
+    });
 
     expect(result.current.width).toBe(0);
     expect(result.current.height).toBe(0);
@@ -96,7 +110,9 @@ describe("useDimensions", () => {
   it("should use border-box size", () => {
     console.warn = jest.fn();
     let { result } = renderHelper({ useBorderBoxSize: true });
-    result.current.observe(target);
+    act(() => {
+      result.current.observe(target);
+    });
     const contentBoxSize = { blockSize: 100, inlineSize: 100 };
     act(() => {
       triggerObserverCb({ contentBoxSize });
@@ -109,7 +125,9 @@ describe("useDimensions", () => {
 
     console.warn = jest.fn();
     result = renderHelper({ useBorderBoxSize: true }).result;
-    result.current.observe(target);
+    act(() => {
+      result.current.observe(target);
+    });
     const borderBoxSize = { blockSize: 110, inlineSize: 110 };
     act(() => triggerObserverCb({ contentBoxSize, borderBoxSize }));
     expect(console.warn).not.toHaveBeenCalledWith(borderBoxWarn);
@@ -119,18 +137,24 @@ describe("useDimensions", () => {
 
   it("should return currentBreakpoint correctly", () => {
     let { result } = renderHelper();
-    result.current.observe(target);
+    act(() => {
+      result.current.observe(target);
+    });
     expect(result.current.currentBreakpoint).toBe("");
 
     result = renderHelper({ breakpoints: { T1: 100 } }).result;
-    result.current.observe(target);
+    act(() => {
+      result.current.observe(target);
+    });
     act(() => triggerObserverCb({ contentRect: { width: 0 } }));
     expect(result.current.currentBreakpoint).toBe("");
     act(() => triggerObserverCb({ contentRect: { width: 99 } }));
     expect(result.current.currentBreakpoint).toBe("");
 
     result = renderHelper({ breakpoints: { T0: 0, T1: 100 } }).result;
-    result.current.observe(target);
+    act(() => {
+      result.current.observe(target);
+    });
     act(() => triggerObserverCb({ contentRect: { width: 0 } }));
     expect(result.current.currentBreakpoint).toBe("T0");
     act(() => triggerObserverCb({ contentRect: { width: 99 } }));
@@ -144,7 +168,9 @@ describe("useDimensions", () => {
 
   it("should return entry correctly", () => {
     const { result } = renderHelper();
-    result.current.observe(target);
+    act(() => {
+      result.current.observe(target);
+    });
     expect(result.current.entry).toBeUndefined();
 
     const e = { contentRect: { width: 100, height: 100 } };
@@ -161,7 +187,9 @@ describe("useDimensions", () => {
   it("should trigger onResize without breakpoints", () => {
     const onResize = jest.fn();
     const { result } = renderHelper({ onResize });
-    result.current.observe(target);
+    act(() => {
+      result.current.observe(target);
+    });
     const contentRect = { width: 100, height: 100 };
     act(() => triggerObserverCb({ contentRect }));
     expect(onResize).toHaveBeenCalledWith({
@@ -180,7 +208,9 @@ describe("useDimensions", () => {
       breakpoints: { T0: 0, T1: 100 },
       onResize,
     });
-    result.current.observe(target);
+    act(() => {
+      result.current.observe(target);
+    });
     const contentRect = { width: 50, height: 100 };
     act(() => {
       triggerObserverCb({ contentRect });
@@ -202,7 +232,9 @@ describe("useDimensions", () => {
       breakpoints: { T0: 100, T1: 200 },
       updateOnBreakpointChange: true,
     });
-    result.current.observe(target);
+    act(() => {
+      result.current.observe(target);
+    });
     act(() => triggerObserverCb({ contentRect: { width: 50 } }));
     expect(result.current.width).toBe(0);
     act(() => triggerObserverCb({ contentRect: { width: 100 } }));
@@ -211,9 +243,11 @@ describe("useDimensions", () => {
 
   it("should update state conditionally", () => {
     const { result } = renderHelper({
-      shouldUpdate: ({ width }) => width > 300,
+      shouldUpdate: ({ width }) => (width ?? 0) > 300,
+    });
+    act(() => {
+      result.current.observe(target);
     });
-    result.current.observe(target);
     act(() => triggerObserverCb({ contentRect: { width: 100 } }));
     expect(result.current.width).toBe(0);
     act(() => triggerObserverCb({ contentRect: { width: 400 } }));
@@ -226,16 +260,20 @@ describe("useDimensions", () => {
     let { result } = renderHelper({
       updateOnBreakpointChange: true,
     });
-    result.current.observe(target);
+    act(() => {
+      result.current.observe(target);
+    });
     act(() => triggerObserverCb({ contentRect: { width: 50 } }));
     expect(result.current.width).toBe(50);
 
     result = renderHelper({
       breakpoints: { T0: 100, T1: 200 },
       updateOnBreakpointChange: true,
-      shouldUpdate: ({ width }) => width > 300,
+      shouldUpdate: ({ width }) => (width ?? 0) > 300,
     }).result;
-    result.current.observe(target);
+    act(() => {
+      result.current.observe(target);
+    });
     act(() => triggerObserverCb({ contentRect: { width: 100 } }));
     expect(result.current.width).toBe(0);
     act(() => triggerObserverCb({ contentRect: { width: 400 } }));
@@ -271,7 +309,9 @@ describe("useDimensions", () => {
     // @ts-ignore
     delete global.ResizeObserverEntry;
     const { result } = renderHelper({ polyfill: mockResizeObserver });
-    result.current.observe(target);
+    act(() => {
+      result.current.observe(target);
+    });
     expect(observe).toHaveBeenCalledTimes(1);
   });
 });

src/index.ts

@@ -9,8 +9,8 @@ export const borderBoxWarn =
 
 interface State {
   readonly currentBreakpoint: string;
-  readonly width: number;
-  readonly height: number;
+  readonly width: number | null;
+  readonly height: number | null;
   readonly entry?: ResizeObserverEntry;
 }
 interface Observe<T> {
@@ -66,8 +66,8 @@ const useDimensions = <T extends HTMLElement | null>({
 }: Options<T> = {}): Return<T> => {
   const [state, setState] = useState<State>({
     currentBreakpoint: "",
-    width: 0,
-    height: 0,
+    width: null,
+    height: null,
   });
   const prevSizeRef = useRef<{ width?: number; height?: number }>({});
   const prevBreakpointRef = useRef<string>();
@@ -86,6 +86,11 @@ const useDimensions = <T extends HTMLElement | null>({
       if (element && element !== ref.current) {
         unobserve();
         ref.current = element;
+        setState({
+          currentBreakpoint: "",
+          width: element.clientWidth,
+          height: element.clientHeight,
+        });
       }
       if (observerRef.current && ref.current)
         observerRef.current.observe(ref.current as HTMLElement);