v0.2.5: simpler implementation, fix issues and smaller size

Author: rob2d

README.md

@@ -9,7 +9,7 @@ npm install -D use-viewport-sizes
 ```
 
 ## Benefits
-- extremely lightweight and dependency-free; **2.59kb pre-gzipped** with all dependencies.
+- extremely lightweight and dependency-free -- **2.25kb with no gzip compression**
 - only one `window.onresize` handler used to subscribe to any changes in an unlimited number of components.
 - optional debounce to delay updates until user stops dragging their window for a moment; this can make expensive components with size-dependent calculations run much faster and your app feel smoother.
 - debouncing does not create new handlers or waste re-renders in your component; the results are also pooled from only one resize result.

build/index.js

@@ -1,6 +1,6 @@
 {
   "name": "use-viewport-sizes",
-  "version": "0.2.3",
+  "version": "0.2.5",
   "description": "tiny React hook which allows you to track visible window viewport size in your components w/ an optional debounce for updates for optimal rendering.",
   "main": "build/index.js",
   "scripts": {

package.json

@@ -1,22 +1,16 @@
-import { useState, useEffect, useLayoutEffect, useMemo } from "react"
-
-// Note: not using pure ES6/7 as babel
-// transpilation eats into precious
-// bytes and we're being petty here 🙂
-
-var { documentElement } = window.document;
+import { useState, useRef, useLayoutEffect, useMemo } from "react"
 
 function getVpWidth () {
     return (typeof window != 'undefined') ? Math.max(
-        documentElement.clientWidth, 
+        window.document.documentElement.clientWidth, 
         window.innerWidth || 0
       ) : 0;
 }
 
 
 function getVpHeight () {
     return (typeof window != 'undefined') ? Math.max(
-        documentElement.clientHeight,
+        window.document.documentElement.clientHeight,
         window.innerHeight || 0
     ) : 0;
 }
@@ -29,64 +23,61 @@ function getVpHeight () {
 // transpilation saves a bit of filesize
 
 var listeners = new Set();
-var vpW = 0;
-var vpH = 0;
-
-let hasListenerBeenAttached = false;
-
+var vpW = getVpWidth();
+var vpH = getVpHeight();
 
 // should only be called by *one* component once; 
 // will iterate through all subscribers
 // afterwards
 
 function onResize() {
-    let vpWidth = getVpWidth();
-    let vpHeight = getVpHeight();
+    vpW = getVpWidth();
+    vpH = getVpHeight();
+    
     listeners.forEach(function(listener) {
-        listener({ vpWidth, vpHeight });
+        listener({ vpWidth : vpW, vpHeight : vpH });
     });
 }
 
-
-
 // =============== //
 //    the Hook     //
 // =============== //
 
 function useViewportSizes(debounce) {
+    const [{ vpWidth, vpHeight }, setState] = useState(()=> ({
+        vpWidth : vpW, 
+        vpHeight : vpH
+    }));
+    const timeout = useRef(undefined);
+    const listener = useMemo(()=> (!debounce ?
+        state => setState(state) : 
+        state => {
+            if(timeout.current) {
+                clearTimeout(timeout.current);
+            }
+            timeout.current = setTimeout(()=> 
+                setState(state), debounce
+            );
+        }
+    ), [debounce, setState]);
+    
     useLayoutEffect(()=> {
-        if(window && !hasListenerBeenAttached) {
-            hasListenerBeenAttached = true;
+        listeners.add(listener);
+
+        if(window && listeners.size == 1) {
             window.addEventListener('resize', onResize);        
             onResize();
         }
-    }, []);
 
-    const [{ vpWidth, vpHeight }, setState] = useState(() => ({ 
-        vpWidth : vpW, vpHeight : vpH
-    }));
-
-    const listener = useMemo(()=> {
-        listeners.delete(listener);
+        // clean up listeners on unmount
 
-        let interval = undefined;
+        return () => {
+            listeners.delete(listener);
 
-        return !debounce ?
-            state => setState({ ...state }) : 
-            state => {
-                if(interval) {
-                    clearTimeout(interval);
-                }
-                interval = setTimeout(()=> 
-                    setState({ ...state }), 
-                    debounce
-                );
-            };
-    }, [debounce, setState]);
-
-    useEffect(() => {
-        listeners.add(listener);
-        return () => listeners.delete(listener);
+            if(listeners.size == 0) {
+                window.removeEventListener('resize', onResize);
+            }
+        };
     }, []);
 
     return [vpWidth, vpHeight, onResize];