<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(() => {
+    const isFirstRender = firstRenderRef.current;
+    if (isFirstRender) {
       firstRenderRef.current = false;
-  }, []);
-
-  useEffect(() => {
-    // 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?.();
+      return;
     }
-  }, [height, onHeightChange]);
 
-  useEffect(() => {
-    previousHeightRef.current = height;
-  }, [height]);
+    window.log.info('ConversationHero: calling onHeightChange');
+    onHeightChange?.();
+  }, [
+    about,
+    conversationType,
+    groupDescription,
+    isMe,
+    membersCount,
+    name,
+    onHeightChange,
+    phoneNumber,
+    profileName,
+    title,
+    sharedGroupNamesStringified,
+  ]);
 
   let avatarBlur: AvatarBlur;
   let avatarOnClick: undefined | (() => void);
@@ -175,15 +173,7 @@ export const ConversationHero = ({
   /* eslint-disable no-nested-ternary */
   return (
     <>
-      <Measure
-        bounds
-        onResize={({ bounds }) => {
-          assert(bounds, 'We should be measuring the bounds');
-          setHeight(Math.ceil(bounds.height));
-        }}
-      >
-        {({ measureRef }) => (
-          <div className="module-conversation-hero" ref={measureRef}>
+      <div className="module-conversation-hero">
         <Avatar
           acceptedMessageRequest={acceptedMessageRequest}
           avatarPath={avatarPath}
@@ -248,8 +238,6 @@ export const ConversationHero = ({
           sharedGroupNames,
         })}
       </div>
-        )}
-      </Measure>
       {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",