-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

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