1 files changed, 17 insertions, 17 deletions

diff --git a/vnext/src/components/Header.js b/vnext/src/components/Header.js
index 0c01446b..48f89360 100644
--- a/vnext/src/components/Header.js
+++ b/vnext/src/components/Header.js
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useCallback, useRef } from 'react';
 import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
 
@@ -8,17 +8,17 @@ const header = document.getElementById('header');
 header.removeChild(document.getElementById('header_wrapper'));
 
 export default function Header({ children }) {
-    let dHeight = 0;
-    let wHeight = 0;
-    let wScrollCurrent = 0;
-    let wScrollBefore = 0;
-    let wScrollDiff = 0;
+    let dHeight = useRef(0);
+    let wHeight = useRef(0);
+    let wScrollCurrent = useRef(0);
+    let wScrollBefore = useRef(0);
+    let wScrollDiff = useRef(0);
 
     useEffect(() => {
         window.addEventListener('scroll', () => (!window.requestAnimationFrame)
             ? throttle(250, updateHeader)
             : window.requestAnimationFrame(updateHeader), false);
-    }, []);
+    }, [updateHeader]);
     let throttle = (delay, fn) => {
         var last, deferTimer;
         return function () {
@@ -37,21 +37,21 @@ export default function Header({ children }) {
             }
         };
     };
-    let updateHeader = () => {
-        dHeight = document.body.offsetHeight;
-        wHeight = window.innerHeight;
-        wScrollCurrent = window.pageYOffset;
-        wScrollDiff = wScrollBefore - wScrollCurrent;
+    let updateHeader = useCallback(() => {
+        dHeight.current = document.body.offsetHeight;
+        wHeight.current = window.innerHeight;
+        wScrollCurrent.current = window.pageYOffset;
+        wScrollDiff.current = wScrollBefore.current - wScrollCurrent.current;
 
-        if (wScrollCurrent <= 0) {
+        if (wScrollCurrent.current <= 0) {
             // scrolled to the very top; element sticks to the top
             header.classList.remove(elClassHidden);
         } else if (wScrollDiff > 0 && header.classList.contains(elClassHidden)) {
             // scrolled up; element slides in
             header.classList.remove(elClassHidden);
-        } else if (wScrollDiff < 0) {
+        } else if (wScrollDiff.current < 0) {
             // scrolled down
-            if (wScrollCurrent + wHeight >= dHeight && header.classList.contains(elClassHidden)) {
+            if (wScrollCurrent.current + wHeight.current >= dHeight.current && header.classList.contains(elClassHidden)) {
                 // scrolled to the very bottom; element slides in
                 header.classList.remove(elClassHidden);
             } else {
@@ -59,8 +59,8 @@ export default function Header({ children }) {
                 header.classList.add(elClassHidden);
             }
         }
-        wScrollBefore = wScrollCurrent;
-    };
+        wScrollBefore.current = wScrollCurrent.current;
+    }, []);
     return ReactDOM.createPortal(children, header);
 }