fix: bad memoisation in window, screen dimension listener hooks (#2664)

* fix: bad memoisation in window, screen dimension listener hooks

* remove unused variable

Author: santhoshvai

package/src/hooks/useScreenDimensions.ts

@@ -1,5 +1,5 @@
-import { useEffect, useMemo, useState } from 'react';
-import { Dimensions } from 'react-native';
+import { useCallback, useEffect, useState } from 'react';
+import { Dimensions, ScaledSize } from 'react-native';
 
 /**
  * A custom hook that provides functions to calculate dimensions based on
@@ -9,35 +9,46 @@ import { Dimensions } from 'react-native';
  * @returns {Object} An object containing functions vh and vw.
  */
 export const useScreenDimensions = (rounded?: boolean) => {
-  const [screenDimensions, setScreenDimensions] = useState(Dimensions.get('screen'));
+  const [screenDimensions, setScreenDimensions] = useState(() => Dimensions.get('screen'));
 
   useEffect(() => {
-    const subscriptions = Dimensions.addEventListener('change', ({ screen }) => {
+    const handleChange = ({ screen }: { screen: ScaledSize }) => {
       setScreenDimensions((prev) => {
         const { height, width } = screen;
         if (prev.height !== height || prev.width !== width) {
           return screen;
         }
         return prev;
       });
-    });
+    };
+    const subscription = Dimensions.addEventListener('change', handleChange);
 
-    return () => subscriptions?.remove();
-  }, []);
+    // We might have missed an update between calling `get` in render and
+    // `addEventListener` in this handler, so we set it here. If there was
+    // no change, React will filter out this update as a no-op.
+    // pattern ref: react-native-repo/packages/react-native/Libraries/Utilities/useWindowDimensions.js
+    handleChange({ screen: Dimensions.get('screen') });
 
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const vw = (percentageWidth: number) => {
-    const value = screenDimensions.width * (percentageWidth / 100);
-    return rounded ? Math.round(value) : value;
-  };
+    return () => {
+      subscription.remove();
+    };
+  }, []);
 
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const vh = (percentageHeight: number) => {
-    const value = screenDimensions.height * (percentageHeight / 100);
-    return rounded ? Math.round(value) : value;
-  };
+  const vw = useCallback(
+    (percentageWidth: number) => {
+      const value = screenDimensions.width * (percentageWidth / 100);
+      return rounded ? Math.round(value) : value;
+    },
+    [rounded, screenDimensions.width],
+  );
 
-  const screenDimensionFunctions = useMemo(() => ({ vh, vw }), [vh, vw]);
+  const vh = useCallback(
+    (percentageHeight: number) => {
+      const value = screenDimensions.height * (percentageHeight / 100);
+      return rounded ? Math.round(value) : value;
+    },
+    [rounded, screenDimensions.height],
+  );
 
-  return screenDimensionFunctions;
+  return { vh, vw };
 };

package/src/hooks/useViewport.ts

@@ -1,5 +1,5 @@
-import { useEffect, useMemo, useState } from 'react';
-import { Dimensions } from 'react-native';
+import { useCallback } from 'react';
+import { useWindowDimensions } from 'react-native';
 
 /**
  * A custom hook that provides functions to calculate dimensions based on
@@ -9,35 +9,23 @@ import { Dimensions } from 'react-native';
  * @returns {Object} An object containing functions vh and vw.
  */
 export const useViewport = (rounded?: boolean) => {
-  const [viewportDimensions, setViewportDimensions] = useState(Dimensions.get('window'));
+  const viewportDimensions = useWindowDimensions();
 
-  useEffect(() => {
-    const subscriptions = Dimensions.addEventListener('change', ({ window }) => {
-      setViewportDimensions((prev) => {
-        const { height, width } = window;
-        if (prev.height !== height || prev.width !== width) {
-          return window;
-        }
-        return prev;
-      });
-    });
+  const vw = useCallback(
+    (percentageWidth: number) => {
+      const value = viewportDimensions.width * (percentageWidth / 100);
+      return rounded ? Math.round(value) : value;
+    },
+    [rounded, viewportDimensions.width],
+  );
 
-    return () => subscriptions?.remove();
-  }, []);
+  const vh = useCallback(
+    (percentageHeight: number) => {
+      const value = viewportDimensions.height * (percentageHeight / 100);
+      return rounded ? Math.round(value) : value;
+    },
+    [rounded, viewportDimensions.height],
+  );
 
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const vw = (percentageWidth: number) => {
-    const value = viewportDimensions.width * (percentageWidth / 100);
-    return rounded ? Math.round(value) : value;
-  };
-
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const vh = (percentageHeight: number) => {
-    const value = viewportDimensions.height * (percentageHeight / 100);
-    return rounded ? Math.round(value) : value;
-  };
-
-  const viewportFunctions = useMemo(() => ({ vh, vw }), [vh, vw]);
-
-  return viewportFunctions;
+  return { vh, vw };
 };