Merge pull request #31 from micah-redwood/uselayouteffect-ssr-warning

Avoid useLayoutEffect warning during SSR

Author: rob2d

src/index.js

@@ -3,7 +3,8 @@ import {
     useMemo, 
     useCallback, 
     useRef, 
-    useLayoutEffect 
+    useLayoutEffect, 
+    useEffect, 
 } from 'react';
 
 function getVpWidth() {
@@ -21,6 +22,12 @@ function getVpHeight() {
     ) : 0;
 }
 
+// Avoid useLayoutEffect warning during SSR
+// https://usehooks-ts.com/react-hook/use-isomorphic-layout-effect
+function useIsomorphicLayoutEffect() {
+    typeof window !== 'undefined' ? useLayoutEffect : useEffect;
+}
+
 // =============== //
 //  Shared State   //
 // =============== //
@@ -204,7 +211,7 @@ export default function useViewportSizes(input) {
         }
     }, [debounceTimeoutRef, hasher, dimension, state]);
 
-    useLayoutEffect(() => {
+    useIsomorphicLayoutEffect(() => {
         resolverMap.set(listener, {
             options,
             prevHash: state.hash || undefined