From 2be2c07df5b78814d8a796b2893195ae32855c7e Mon Sep 17 00:00:00 2001 From: Marshall Polaris Date: Sat, 24 Sep 2022 16:30:43 -0700 Subject: [PATCH] Don't re-render more than necessary with `useIsMobile` hook --- web/hooks/use-is-mobile.ts | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/web/hooks/use-is-mobile.ts b/web/hooks/use-is-mobile.ts index 9ce0133c..41b0c302 100644 --- a/web/hooks/use-is-mobile.ts +++ b/web/hooks/use-is-mobile.ts @@ -1,7 +1,13 @@ -import { useWindowSize } from 'web/hooks/use-window-size' +import { useEffect, useState } from 'react' -// matches talwind sm breakpoint export function useIsMobile() { - const { width } = useWindowSize() - return (width ?? 0) < 640 + const [isMobile, setIsMobile] = useState() + useEffect(() => { + // matches tailwind sm breakpoint + const onResize = () => setIsMobile(window.innerWidth < 640) + onResize() + window.addEventListener('resize', onResize) + return () => window.removeEventListener('resize', onResize) + }, []) + return isMobile }