From 32df2e55f943d3e7c11a5bf990729acbbbb8fa4a Mon Sep 17 00:00:00 2001 From: KATT Date: Thu, 24 Sep 2020 17:06:21 +0200 Subject: [PATCH 1/2] prevent calling `measureHeight()` on every render https://reactjs.org/docs/hooks-reference.html#lazy-initial-state Signed-off-by: KATT --- packages/react-div-100vh/src/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-div-100vh/src/index.tsx b/packages/react-div-100vh/src/index.tsx index 0dd4b3f..18b606a 100644 --- a/packages/react-div-100vh/src/index.tsx +++ b/packages/react-div-100vh/src/index.tsx @@ -23,7 +23,7 @@ export default function Div100vh({ } export function use100vh(): number | null { - const [height, setHeight] = useState(measureHeight()) + const [height, setHeight] = useState(measureHeight) const wasRenderedOnClientAtLeastOnce = useWasRenderedOnClientAtLeastOnce() From 25994ca9016028badfe2c769849fdd029e27c3a7 Mon Sep 17 00:00:00 2001 From: KATT Date: Thu, 24 Sep 2020 17:10:16 +0200 Subject: [PATCH 2/2] prevent re-setting event listeners on every resize MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit reference https://reactjs.org/docs/hooks-reference.html#functional-updates “If your update function returns the exact same value as the current state, the subsequent rerender will be skipped completely.” Signed-off-by: KATT --- packages/react-div-100vh/src/index.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/react-div-100vh/src/index.tsx b/packages/react-div-100vh/src/index.tsx index 18b606a..1f9139f 100644 --- a/packages/react-div-100vh/src/index.tsx +++ b/packages/react-div-100vh/src/index.tsx @@ -32,12 +32,12 @@ export function use100vh(): number | null { function setMeasuredHeight() { const measuredHeight = measureHeight() - if (height !== measuredHeight) setHeight(measuredHeight) + setHeight(measuredHeight) } window.addEventListener('resize', setMeasuredHeight) return () => window.removeEventListener('resize', setMeasuredHeight) - }, [height, wasRenderedOnClientAtLeastOnce]) + }, [wasRenderedOnClientAtLeastOnce]) return wasRenderedOnClientAtLeastOnce ? height : null } @@ -57,10 +57,10 @@ function useWasRenderedOnClientAtLeastOnce() { ] = useState(false) useEffect(() => { - if (isClient() && !wasRenderedOnClientAtLeastOnce) { + if (isClient()) { setWasRenderedOnClientAtLeastOnce(true) } - }, [wasRenderedOnClientAtLeastOnce]) + }, []) return wasRenderedOnClientAtLeastOnce }