perf: Caught a debounced hook re-rendering continously

app/components/Guide.tsx

@@ -1,4 +1,3 @@
-import { observer } from "mobx-react";
 import * as React from "react";
 import { Dialog, DialogBackdrop, useDialogState } from "reakit/Dialog";
 import styled from "styled-components";
@@ -112,4 +111,4 @@ const Content = styled(Scrollable)`
   padding: 16px;
 `;
 
-export default observer(Guide);
+export default Guide;

app/hooks/useWindowSize.ts

@@ -1,5 +1,5 @@
-import { debounce } from "lodash";
 import * as React from "react";
+import useDebouncedCallback from "./useDebouncedCallback";
 import useEventListener from "./useEventListener";
 
 /**
@@ -14,17 +14,17 @@ export default function useWindowSize() {
     height: window.innerHeight,
   });
 
-  const handleResize = React.useMemo(
-    () =>
-      debounce(() => {
-        // Set window width/height to state
-        setWindowSize({
-          width: window.innerWidth,
-          height: window.innerHeight,
-        });
-      }, 100),
-    []
-  );
+  const handleResize = useDebouncedCallback(() => {
+    if (
+      window.innerWidth !== windowSize.width ||
+      window.innerHeight !== windowSize.height
+    ) {
+      setWindowSize({
+        width: window.innerWidth,
+        height: window.innerHeight,
+      });
+    }
+  }, 100);
 
   useEventListener("resize", handleResize);