trigger new listeners to support lazy loaded components

Author: rob2d

.babelrc

@@ -1,6 +1,6 @@
 {
     "presets": [
-        "@babel/preset-env",
-        "@babel/preset-react"
+        "@babel/preset-env"
+    
     ]
 }

README.md

@@ -11,12 +11,12 @@ npm install -D use-viewport-sizes
 ```
 
 ## Benefits ##
-- extremely lightweight and zero dependencies -- adds **1.9kb** after gzip.
+- extremely lightweight and zero dependencies -- adds **2kb** after gzip.
 - only one `window.onresize` handler used to subscribe to any changes in an unlimited number of components no matter the use-cases.
 - 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.
 - optional hash function to update component subtree only at points you would like to.
-- supports SSR (see example under Usage section).
+- supports lazy loaded components and SSR out of the box (see example SSR under Usage section).
 
 
 ## Usage ##
@@ -154,7 +154,7 @@ function MySSRComponent (props) {
 ```
 
 ## Support
-If you have read the examples and have any issues which you know are glitches,or would like to request something changed, please feel free to [post an issue on Github](https://github.com/rob2d/use-viewport-sizes/issues/new).
+If you find any issues or would like to request something changed, please feel free to [post an issue on Github](https://github.com/rob2d/use-viewport-sizes/issues/new).
 
 Otherwise, if this was useful and you'd like to show your support, no donations necessary, but please consider [checking out the repo](https://github.com/rob2d/use-viewport-sizes) and giving it a star (⭐).
 

package-lock.json

@@ -1,4 +1,10 @@
-import { useState, useMemo, useCallback, useRef, useLayoutEffect } from 'react';
+import { 
+    useState, 
+    useMemo, 
+    useCallback, 
+    useRef, 
+    useLayoutEffect 
+} from 'react';
 
 function getVpWidth() {
     return (typeof window != 'undefined') ? Math.max(
@@ -64,9 +70,7 @@ function triggerResizeListener(listener, vpWidth, vpHeight) {
     const { options, prevHash=undefined } = resolverMap?.get(listener) || {};
     const { hasher } = options;
 
-    if(!options?.hasher) {
-        const dimensionsUpdated = new Set();
-
+    if(!hasher) {
         switch (options?.dimension) {
             case 'w':
                 hash = `${vpWidth}`;
@@ -89,7 +93,9 @@ function triggerResizeListener(listener, vpWidth, vpHeight) {
     if(shouldRun) {
         const state = { ...params, options, hash };
         resolverMap.set(listener, {
-            options, prevHash: hash, prevState: state
+            options, 
+            prevHash: hash, 
+            prevState: state
         });
         listener(state);
     }
@@ -116,20 +122,13 @@ function onResize() {
 // =============== //
 
 function getInitialState(options, vpW, vpH) {
-    let returnValue = {};
-    if(options.hasher) {
-        returnValue = options.hasher({ vpW, vpH });
-    } else {
-        returnValue = { vpW, vpH };
-    }
-
     return (!options.hasher ?
         { vpW, vpH } :
-        hasher && hasher({ vpW: vpWidth, vpH: vpHeight })
+        options.hasher({ vpW: vpWidth, vpH: vpHeight })
     )
 }
 
-function useViewportSizes(input) {
+export default function useViewportSizes(input) {
     const hasher = ((typeof input == 'function') ?
         input :
         input?.hasher
@@ -213,9 +212,17 @@ function useViewportSizes(input) {
 
         listeners.add(listener);
 
+        // if first resize listener, add resize event
+
         if(window && listeners.size == 1) {
             window.addEventListener('resize', onResize);
             onResize();
+        } 
+        
+        // if additional resize listener, trigger it on the new listener
+
+        else {
+            triggerResizeListener(listener, vpWidth, vpHeight);
         }
 
         // clean up listeners on unmount
@@ -259,5 +266,3 @@ function useViewportSizes(input) {
 
     return returnValue;
 }
-
-export default useViewportSizes;