Fix Avatar state update - https://stackoverflow.com/questions/54865764

3 files changed, 5 insertions, 3 deletions

diff --git a/vnext/src/components/Avatar.js b/vnext/src/components/Avatar.js
index 67d75c5e..64c16ead 100644
--- a/vnext/src/components/Avatar.js
+++ b/vnext/src/components/Avatar.js
@@ -15,6 +15,7 @@ let isMounted;
 function Avatar(props) {
     const [user, setUser] = useState(props.user);
     useEffect(() => {
+        setUser(props.user);
         isMounted = true;
         if (!user.uid && user.uri) {
             fetchUserUri(user.uri).then(response => {
@@ -26,7 +27,7 @@ function Avatar(props) {
                 isMounted = false;
             };
         }
-    });
+    }, [props.user]);
     return (
         <div className="Avatar" style={props.style}>
             <div className="msg-avatar">
diff --git a/vnext/src/components/Types.js b/vnext/src/components/Types.js
index db90d41e..5a495ff3 100644
--- a/vnext/src/components/Types.js
+++ b/vnext/src/components/Types.js
@@ -2,7 +2,8 @@ import PropTypes from 'prop-types';
 
 export const UserType = PropTypes.shape({
     uid: PropTypes.number,
-    uname: PropTypes.string
+    uname: PropTypes.string,
+    avatar: PropTypes.string
 });
 
 export const MessageType = PropTypes.shape({
diff --git a/vnext/src/components/UserInfo.js b/vnext/src/components/UserInfo.js
index b08355f8..c76ef0c7 100644
--- a/vnext/src/components/UserInfo.js
+++ b/vnext/src/components/UserInfo.js
@@ -27,7 +27,7 @@ export default function UserInfo(props) {
         return () => {
             isMounted = false;
         };
-    });
+    }, []);
     return (
         <>
             <div className="userinfo">