From 6f94af12cf46f19e06d19a255497a465efb34180 Mon Sep 17 00:00:00 2001 From: Andrei Grigore Date: Fri, 5 Nov 2021 11:52:02 +0200 Subject: [PATCH] window dimension hook cleanup --- src/helpers/useWindowSize.jsx | 9 +-------- 1 file changed, 1 insertion(+), 8 deletions(-) diff --git a/src/helpers/useWindowSize.jsx b/src/helpers/useWindowSize.jsx index 3753cc8..a908882 100644 --- a/src/helpers/useWindowSize.jsx +++ b/src/helpers/useWindowSize.jsx @@ -1,16 +1,12 @@ import { useState, useEffect } from 'react'; export default function useWindowSize() { - // Initialize state with undefined width/height so server and client renders match - // Learn more here: https://joshwcomeau.com/react/the-perils-of-rehydration/ const [windowSize, setWindowSize] = useState({ width: undefined, height: undefined, }); useEffect(() => { - // Handler to call on window resize function handleResize() { - // Set window width/height to state if (typeof window !== 'undefined') { setWindowSize({ width: window.innerWidth, @@ -18,18 +14,15 @@ export default function useWindowSize() { }); } } - // Add event listener if (typeof window !== 'undefined') { window.addEventListener('resize', handleResize); handleResize(); } - // Call handler right away so state gets updated with initial window size - // Remove event listener on cleanup return () => { if (typeof window !== 'undefined') { window.removeEventListener('resize', handleResize); } }; - }, []); // Empty array ensures that effect is only run on mount + }, []); return windowSize; }