From 37ead30237699e6fc5b587718f0041bd4d9d3afb Mon Sep 17 00:00:00 2001
From: Nikita Bahliuk <nikita.bahliuk@catonetworks.com>
Date: Thu, 13 Aug 2020 20:08:05 +0300
Subject: [PATCH] Prevent parent from unnecessary updates when scrolling
 window.

---
 src/useRect.js | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/useRect.js b/src/useRect.js
index 05e2d1a9..24b34238 100644
--- a/src/useRect.js
+++ b/src/useRect.js
@@ -6,7 +6,7 @@ import useIsomorphicLayoutEffect from './useIsomorphicLayoutEffect'
 
 export default function useRect(nodeRef) {
   const [element, setElement] = React.useState(nodeRef.current)
-  const [rect, setRect] = React.useState(null)
+  const [rect, dispatch] = React.useReducer(rectReducer, null);
   const initialRectSet = React.useRef(false)
 
   useIsomorphicLayoutEffect(() => {
@@ -18,7 +18,8 @@ export default function useRect(nodeRef) {
   useIsomorphicLayoutEffect(() => {
     if (element && !initialRectSet.current) {
       initialRectSet.current = true
-      setRect(element.getBoundingClientRect())
+      const rect = element.getBoundingClientRect();
+      dispatch({ rect });
     }
   }, [element])
 
@@ -27,7 +28,9 @@ export default function useRect(nodeRef) {
       return
     }
 
-    const observer = observeRect(element, setRect)
+    const observer = observeRect(element, rect => {
+      dispatch({ rect });
+    });
 
     observer.observe()
 
@@ -38,3 +41,12 @@ export default function useRect(nodeRef) {
 
   return rect
 }
+
+function rectReducer(state, action) {
+  const rect = action.rect;
+  if (!state || state.height !== rect.height || state.width !== rect.width) {
+    return rect;
+  }
+  return state;
+}
+