Fix ESLint warnings

react hooks linter fixes header!

3 files changed, 20 insertions, 21 deletions

diff --git a/vnext/src/components/Chat.js b/vnext/src/components/Chat.js
index 0742b7fb3..8c1e2311b 100644
--- a/vnext/src/components/Chat.js
+++ b/vnext/src/components/Chat.js
@@ -14,7 +14,7 @@ import './Chat.css';
 
 export default function Chat(props) {
     const [chats, setChats] = useState([]);
-    useEffect(() => {        
+    useEffect(() => {
         if (props.connection.addEventListener) {
             props.connection.addEventListener('msg', onMessage);
         }
diff --git a/vnext/src/components/Header.js b/vnext/src/components/Header.js
index 0c01446b1..48f893606 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);
 }
 
diff --git a/vnext/src/components/Thread.js b/vnext/src/components/Thread.js
index 912f808f3..66b5fd623 100644
--- a/vnext/src/components/Thread.js
+++ b/vnext/src/components/Thread.js
@@ -88,11 +88,10 @@ export default function Thread(props) {
     setActive(0);
     loadReplies();
   }, []);
-  useEffect(() => {    
+  useEffect(() => {
     if (props.connection.addEventListener && message.mid) {
       props.connection.addEventListener('msg', onReply);
-    };
-    
+    }
     return () => {
       if (props.connection.removeEventListener && message.mid) {
         props.connection.removeEventListener('msg', onReply);