diff --git a/app/components/Guide.tsx b/app/components/Guide.tsx index ab495e7ff..4f90ddd68 100644 --- a/app/components/Guide.tsx +++ b/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; diff --git a/app/hooks/useWindowSize.ts b/app/hooks/useWindowSize.ts index 08c7846eb..9bb4e7248 100644 --- a/app/hooks/useWindowSize.ts +++ b/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);