Warning in server side rendering

[Romcol]

Hi,

When using useComponentSize with server side rendering we experience this warning.

Warning: useLayoutEffect does nothing on the server, because its effect cannot be encoded into the server renderer's output format. This will lead to a mismatch between the initial, non-hydrated UI and the intended UI. To avoid this, useLayoutEffect should only be used in components that render exclusively on the client. See https://fb.me/react-uselayouteffect-ssr for common fixes.%s

The warning points to this ressource https://fb.me/react-uselayouteffect-ssr for correct handling on the server.

This is not major but should be better for those of us using SSR 😉

Anyways, thanks for lib!

[Magellol]

We're faced with the same issue. For now we've patched the local node-modules through patch-package

-let { useCallback, useState, useLayoutEffect } = require('react')
+let { useCallback, useState, useLayoutEffect, useEffect } = require('react')
+
+/**
+ * To properly measure. we need useLayoutEffect in the client but it generates a warning in the console
+ * since it has no effect when it runs on the server. This is to work around it.
+ * We've used this implementation: https://github.com/streamich/react-use/blob/master/src/useIsomorphicLayoutEffect.ts
+ * 
+ * See this issue for more details: https://github.com/rehooks/component-size/issues/32
+ */
+const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
 
 function getSize(el) {
   if (!el) {
@@ -29,7 +38,7 @@ function useComponentSize(ref) {
     [ref]
   )
 
-  useLayoutEffect(
+  useIsomorphicLayoutEffect(
     () => {
       if (!ref.current) {
         return

[swashata]

This is the patch for v1.0.3

diff --git a/node_modules/@rehooks/component-size/index.js b/node_modules/@rehooks/component-size/index.js
index 5e652a2..a161d61 100644
--- a/node_modules/@rehooks/component-size/index.js
+++ b/node_modules/@rehooks/component-size/index.js
@@ -3,6 +3,15 @@ var React = require('react')
 var useState = React.useState
 var useCallback = React.useCallback
 var useLayoutEffect = React.useLayoutEffect
+var useEffect = React.useEffect
+/**
+ * To properly measure. we need useLayoutEffect in the client but it generates a warning in the console
+ * since it has no effect when it runs on the server. This is to work around it.
+ * We've used this implementation: https://github.com/streamich/react-use/blob/master/src/useIsomorphicLayoutEffect.ts
+ *
+ * See this issue for more details: https://github.com/rehooks/component-size/issues/32
+ */
+var useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect
 
 function getSize(el) {
   if (!el) {
@@ -32,7 +41,7 @@ function useComponentSize(ref) {
     [ref]
   )
 
-  useLayoutEffect(
+  useIsomorphicLayoutEffect(
     function() {
       if (!ref.current) {
         return