+ debounce responsive hooks

package.json

@@ -64,5 +64,8 @@
     "react-native": "^0.61.5",
     "react-test-renderer": "^16.13.1",
     "typescript": "^3.8.3"
+  },
+  "dependencies": {
+    "lodash": "^4.17.21"
   }
 }

src/index.ts

@@ -1,11 +1,25 @@
-import { useState, useEffect, useRef } from "react";
-import { Dimensions, ScaledSize } from "react-native";
+import { useState, useEffect, useRef,useCallback } from "react";
+import {Dimensions, ScaledSize} from "react-native";
+import {debounce} from "lodash"
+
+// declare debounced state functionality
+const useDebouncedState = (initialValue: any, durationInMs = 200) => {
+  const [internalState, setInternalState] = useState(initialValue);
+  const debouncedFunction = useCallback(debounce(setInternalState, durationInMs), [
+    setInternalState,
+    durationInMs
+  ]);
+  return [internalState, debouncedFunction];
+};
+
 
 const useDimensionsListener = () => {
-  const [screenDimension, setScreenDimension] = useState(
+
+  // use debounced state for dimensions
+  const [screenDimension, setScreenDimension] = useDebouncedState(
     Dimensions.get("screen")
   );
-  const [windowDimension, setWindowDimension] = useState(
+  const [windowDimension, setWindowDimension] = useDebouncedState(
     Dimensions.get("window")
   );
 
@@ -21,9 +35,9 @@ const useDimensionsListener = () => {
       setScreenDimension(screen);
     }
 
-    Dimensions.addEventListener("change", handleDimensionChange);
+    const listener = Dimensions.addEventListener("change", handleDimensionChange);
     return () => {
-      Dimensions.removeEventListener("change", handleDimensionChange);
+      listener.remove();
     };
   }, []);
 

yarn.lock

@@ -5253,6 +5253,11 @@ lodash@^4.17.10, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548"
   integrity sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==
 
+lodash@^4.17.21:
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
+  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
+
 log-symbols@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-2.2.0.tgz#5740e1c5d6f0dfda4ad9323b5332107ef6b4c40a"