<ConversationHero>: only call onHeightChange when certain props change

ts/components/conversation/ConversationHero.tsx

@@ -2,7 +2,6 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import React, { useEffect, useRef, useState } from 'react';
-import Measure from 'react-measure';
 import { Avatar, AvatarBlur, Props as AvatarProps } from '../Avatar';
 import { ContactName } from './ContactName';
 import { About } from './About';
@@ -11,7 +10,6 @@ import { SharedGroupNames } from '../SharedGroupNames';
 import { LocalizerType } from '../../types/Util';
 import { ConfirmationDialog } from '../ConfirmationDialog';
 import { Button, ButtonSize, ButtonVariant } from '../Button';
-import { assert } from '../../util/assert';
 import { shouldBlurAvatar } from '../../util/shouldBlurAvatar';
 
 export type Props = {
@@ -114,9 +112,6 @@ export const ConversationHero = ({
 }: Props): JSX.Element => {
   const firstRenderRef = useRef(true);
 
-  const previousHeightRef = useRef<undefined | number>();
-  const [height, setHeight] = useState<undefined | number>();
-
   const [
     isShowingMessageRequestWarning,
     setIsShowingMessageRequestWarning,
@@ -130,26 +125,29 @@ export const ConversationHero = ({
     updateSharedGroups();
   }, [updateSharedGroups]);
 
+  const sharedGroupNamesStringified = JSON.stringify(sharedGroupNames);
   useEffect(() => {
-    firstRenderRef.current = false;
+    const isFirstRender = firstRenderRef.current;
-  }, []);
+    if (isFirstRender) {
-
+      firstRenderRef.current = false;
-  useEffect(() => {
+      return;
-    // We only want to kick off a "height change" when the height goes from number to
-    //   number. We DON'T want to do it when we measure the height for the first time, as
-    //   this will cause a re-render loop.
-    const previousHeight = previousHeightRef.current;
-    if (previousHeight && height && previousHeight !== height) {
-      window.log.info(
-        `ConversationHero height changed from ${previousHeight} to ${height}`
-      );
-      onHeightChange?.();
     }
-  }, [height, onHeightChange]);
 
-  useEffect(() => {
+    window.log.info('ConversationHero: calling onHeightChange');
-    previousHeightRef.current = height;
+    onHeightChange?.();
-  }, [height]);
+  }, [
+    about,
+    conversationType,
+    groupDescription,
+    isMe,
+    membersCount,
+    name,
+    onHeightChange,
+    phoneNumber,
+    profileName,
+    title,
+    sharedGroupNamesStringified,
+  ]);
 
   let avatarBlur: AvatarBlur;
   let avatarOnClick: undefined | (() => void);
@@ -175,81 +173,71 @@ export const ConversationHero = ({
   /* eslint-disable no-nested-ternary */
   return (
     <>
-      <Measure
+      <div className="module-conversation-hero">
-        bounds
+        <Avatar
-        onResize={({ bounds }) => {
+          acceptedMessageRequest={acceptedMessageRequest}
-          assert(bounds, 'We should be measuring the bounds');
+          avatarPath={avatarPath}
-          setHeight(Math.ceil(bounds.height));
+          blur={avatarBlur}
-        }}
+          className="module-conversation-hero__avatar"
-      >
+          color={color}
-        {({ measureRef }) => (
+          conversationType={conversationType}
-          <div className="module-conversation-hero" ref={measureRef}>
+          i18n={i18n}
-            <Avatar
+          isMe={isMe}
-              acceptedMessageRequest={acceptedMessageRequest}
+          name={name}
-              avatarPath={avatarPath}
+          noteToSelf={isMe}
-              blur={avatarBlur}
+          onClick={avatarOnClick}
-              className="module-conversation-hero__avatar"
+          profileName={profileName}
-              color={color}
+          sharedGroupNames={sharedGroupNames}
-              conversationType={conversationType}
+          size={112}
-              i18n={i18n}
+          title={title}
-              isMe={isMe}
+        />
-              name={name}
+        <h1 className="module-conversation-hero__profile-name">
-              noteToSelf={isMe}
+          {isMe ? (
-              onClick={avatarOnClick}
+            i18n('noteToSelf')
-              profileName={profileName}
+          ) : (
-              sharedGroupNames={sharedGroupNames}
+            <ContactName
-              size={112}
               title={title}
+              name={name}
+              profileName={profileName}
+              phoneNumber={phoneNumber}
+              i18n={i18n}
             />
-            <h1 className="module-conversation-hero__profile-name">
+          )}
-              {isMe ? (
+        </h1>
-                i18n('noteToSelf')
+        {about && !isMe && (
-              ) : (
+          <div className="module-about__container">
-                <ContactName
+            <About text={about} />
-                  title={title}
-                  name={name}
-                  profileName={profileName}
-                  phoneNumber={phoneNumber}
-                  i18n={i18n}
-                />
-              )}
-            </h1>
-            {about && !isMe && (
-              <div className="module-about__container">
-                <About text={about} />
-              </div>
-            )}
-            {!isMe ? (
-              <div className="module-conversation-hero__with">
-                {groupDescription ? (
-                  <GroupDescription
-                    i18n={i18n}
-                    title={title}
-                    text={groupDescription}
-                  />
-                ) : membersCount === 1 ? (
-                  i18n('ConversationHero--members-1')
-                ) : membersCount !== undefined ? (
-                  i18n('ConversationHero--members', [`${membersCount}`])
-                ) : phoneNumberOnly ? null : (
-                  phoneNumber
-                )}
-              </div>
-            ) : null}
-            {renderMembershipRow({
-              acceptedMessageRequest,
-              conversationType,
-              i18n,
-              isMe,
-              onClickMessageRequestWarning() {
-                setIsShowingMessageRequestWarning(true);
-              },
-              phoneNumber,
-              sharedGroupNames,
-            })}
           </div>
         )}
-      </Measure>
+        {!isMe ? (
+          <div className="module-conversation-hero__with">
+            {groupDescription ? (
+              <GroupDescription
+                i18n={i18n}
+                title={title}
+                text={groupDescription}
+              />
+            ) : membersCount === 1 ? (
+              i18n('ConversationHero--members-1')
+            ) : membersCount !== undefined ? (
+              i18n('ConversationHero--members', [`${membersCount}`])
+            ) : phoneNumberOnly ? null : (
+              phoneNumber
+            )}
+          </div>
+        ) : null}
+        {renderMembershipRow({
+          acceptedMessageRequest,
+          conversationType,
+          i18n,
+          isMe,
+          onClickMessageRequestWarning() {
+            setIsShowingMessageRequestWarning(true);
+          },
+          phoneNumber,
+          sharedGroupNames,
+        })}
+      </div>
       {isShowingMessageRequestWarning && (
         <ConfirmationDialog
           i18n={i18n}

ts/util/lint/exceptions.json

@@ -13691,14 +13691,6 @@
     "updated": "2020-10-26T19:12:24.410Z",
     "reasonDetail": "Doesn't refer to a DOM element."
   },
-  {
-    "rule": "React-useRef",
-    "path": "ts/components/conversation/ConversationHero.js",
-    "line": "    const previousHeightRef = react_1.useRef();",
-    "reasonCategory": "falseMatch",
-    "updated": "2021-05-05T21:55:35.064Z",
-    "reasonDetail": "Doesn't refer to a DOM element."
-  },
   {
     "rule": "React-useRef",
     "path": "ts/components/conversation/ConversationHero.tsx",
@@ -13707,13 +13699,6 @@
     "updated": "2020-10-26T19:12:24.410Z",
     "reasonDetail": "Doesn't refer to a DOM element."
   },
-  {
-    "rule": "React-useRef",
-    "path": "ts/components/conversation/ConversationHero.tsx",
-    "line": "  const previousHeightRef = useRef<undefined | number>();",
-    "reasonCategory": "usageTrusted",
-    "updated": "2021-07-30T16:57:33.618Z"
-  },
   {
     "rule": "React-useRef",
     "path": "ts/components/conversation/GIF.js",