Remember message Read More state when scrolling in virtualized container

ts/components/conversation/MessageBodyReadMore.tsx

@@ -1,10 +1,11 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-import React, { useState } from 'react';
+import React, { useEffect } from 'react';
 
 import type { Props as MessageBodyPropsType } from './MessageBody';
 import { MessageBody } from './MessageBody';
+import { usePrevious } from '../../hooks/usePrevious';
 
 export type Props = Pick<
   MessageBodyPropsType,
@@ -16,6 +17,9 @@ export type Props = Pick<
   | 'bodyRanges'
   | 'openConversation'
 > & {
+  id: string;
+  displayLimit?: number;
+  messageExpanded: (id: string, displayLimit: number) => unknown;
   onHeightChange: () => unknown;
 };
 
@@ -57,20 +61,29 @@ export function MessageBodyReadMore({
   bodyRanges,
   direction,
   disableLinks,
+  displayLimit,
   i18n,
+  id,
+  messageExpanded,
   onHeightChange,
   openConversation,
   text,
   textPending,
 }: Props): JSX.Element {
-  const [maxLength, setMaxLength] = useState(INITIAL_LENGTH);
+  const maxLength = displayLimit || INITIAL_LENGTH;
+  const previousMaxLength = usePrevious(maxLength, maxLength);
+
+  useEffect(() => {
+    if (previousMaxLength !== maxLength) {
+      onHeightChange();
+    }
+  }, [maxLength, previousMaxLength, onHeightChange]);
 
   const { hasReadMore, text: slicedText } = graphemeAwareSlice(text, maxLength);
 
   const onIncreaseTextLength = hasReadMore
     ? () => {
-        setMaxLength(oldMaxLength => oldMaxLength + INCREMENT_COUNT);
-        onHeightChange();
+        messageExpanded(id, maxLength + INCREMENT_COUNT);
       }
     : undefined;