1 files changed, 19 insertions, 13 deletions
diff --git a/vnext/src/components/Thread.js b/vnext/src/components/Thread.js
index 87babc1a..912f808f 100644
--- a/vnext/src/components/Thread.js
+++ b/vnext/src/components/Thread.js
@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useRef } from 'react';
+import React, { useEffect, useState, useRef, useCallback } from 'react';
 import PropTypes from 'prop-types';
 
 import ReactRouterPropTypes from 'react-router-prop-types';
@@ -85,18 +85,22 @@ export default function Thread(props) {
   const [loading, setLoading] = useState(false);
   const [active, setActive] = useState(0);
   useEffect(() => {
-    if (props.connection) {
-      props.connection.addEventListener('msg', onReply);
-    }
     setActive(0);
     loadReplies();
+  }, []);
+  useEffect(() => {    
+    if (props.connection.addEventListener && message.mid) {
+      props.connection.addEventListener('msg', onReply);
+    };
+    
     return () => {
-      if (props.connection) {
+      if (props.connection.removeEventListener && message.mid) {
         props.connection.removeEventListener('msg', onReply);
       }
-    };
-  }, [props.connection]);
-  let loadReplies = () => {
+    }
+  }, [props.connection, message.mid]);
+
+  let loadReplies = useCallback(() => {
     document.body.scrollTop = 0;
     document.documentElement.scrollTop = 0;
 
@@ -119,13 +123,15 @@ export default function Thread(props) {
       ).catch(ex => {
         console.log(ex);
       });
-  };
-  let onReply = (json) => {
+  }, []);
+  let onReply = useCallback((json) => {
     const msg = JSON.parse(json.data);
     if (msg.mid == message.mid) {
-      setReplies([...this.state.replies, msg]);
+      setReplies(oldReplies => {
+        return [...oldReplies, msg];
+      });
     }
-  };
+  }, [message]);
   let postComment = (template) => {
     const { mid, rid, body, attach } = template;
     comment(mid, rid, body, attach).then(res => {
@@ -172,5 +178,5 @@ Thread.propTypes = {
   history: ReactRouterPropTypes.history,
   match: ReactRouterPropTypes.match,
   visitor: UserType.isRequired,
-  connection: PropTypes.shape.isRequired
+  connection: PropTypes.object.isRequired
 };