From 4b0319725bfdd58a6542619df35a9c1f8bb1a9d0 Mon Sep 17 00:00:00 2001 From: Cru Scanlan Date: Tue, 22 Feb 2022 19:18:51 +1000 Subject: [PATCH 1/2] Fix for SSR --- index.js | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/index.js b/index.js index 5e652a2..3359a73 100644 --- a/index.js +++ b/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 From 5de06c43f9580c3c71fee83f8dc93bde9162e198 Mon Sep 17 00:00:00 2001 From: Cru Scanlan Date: Tue, 22 Feb 2022 19:27:42 +1000 Subject: [PATCH 2/2] Fix --- index.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/index.js b/index.js index 3359a73..a161d61 100644 --- a/index.js +++ b/index.js @@ -5,9 +5,9 @@ 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 + * 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 */