Memoize toasts to unstick them in AudioCapture

ts/components/Toast.tsx

@@ -1,7 +1,13 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-import React, { KeyboardEvent, MouseEvent, ReactNode, useEffect } from 'react';
+import React, {
+  KeyboardEvent,
+  MouseEvent,
+  ReactNode,
+  memo,
+  useEffect,
+} from 'react';
 import classNames from 'classnames';
 import { createPortal } from 'react-dom';
 import { useRestoreFocus } from '../hooks/useRestoreFocus';
@@ -19,88 +25,90 @@ export type PropsType = {
   };
 };
 
-export const Toast = ({
-  autoDismissDisabled = false,
-  children,
-  className,
-  disableCloseOnClick = false,
-  onClose,
-  timeout = 8000,
-  toastAction,
-}: PropsType): JSX.Element | null => {
-  const [root, setRoot] = React.useState<HTMLElement | null>(null);
-  const [focusRef] = useRestoreFocus();
+export const Toast = memo(
+  ({
+    autoDismissDisabled = false,
+    children,
+    className,
+    disableCloseOnClick = false,
+    onClose,
+    timeout = 8000,
+    toastAction,
+  }: PropsType): JSX.Element | null => {
+    const [root, setRoot] = React.useState<HTMLElement | null>(null);
+    const [focusRef] = useRestoreFocus();
 
-  useEffect(() => {
-    const div = document.createElement('div');
-    document.body.appendChild(div);
-    setRoot(div);
+    useEffect(() => {
+      const div = document.createElement('div');
+      document.body.appendChild(div);
+      setRoot(div);
 
-    return () => {
-      document.body.removeChild(div);
-      setRoot(null);
-    };
-  }, []);
+      return () => {
+        document.body.removeChild(div);
+        setRoot(null);
+      };
+    }, []);
 
-  useEffect(() => {
-    if (!root || autoDismissDisabled) {
-      return;
-    }
-
-    const timeoutId = setTimeout(onClose, timeout);
-
-    return () => {
-      if (timeoutId) {
-        clearTimeout(timeoutId);
+    useEffect(() => {
+      if (!root || autoDismissDisabled) {
+        return;
       }
-    };
-  }, [autoDismissDisabled, onClose, root, timeout]);
 
-  return root
-    ? createPortal(
-        <div
-          aria-live="assertive"
-          className={classNames('Toast', className)}
-          onClick={() => {
-            if (!disableCloseOnClick) {
-              onClose();
-            }
-          }}
-          onKeyDown={(ev: KeyboardEvent<HTMLDivElement>) => {
-            if (ev.key === 'Enter' || ev.key === ' ') {
+      const timeoutId = setTimeout(onClose, timeout);
+
+      return () => {
+        if (timeoutId) {
+          clearTimeout(timeoutId);
+        }
+      };
+    }, [autoDismissDisabled, onClose, root, timeout]);
+
+    return root
+      ? createPortal(
+          <div
+            aria-live="assertive"
+            className={classNames('Toast', className)}
+            onClick={() => {
               if (!disableCloseOnClick) {
                 onClose();
               }
-            }
-          }}
-          role="button"
-          tabIndex={0}
-        >
-          <div className="Toast__content">{children}</div>
-          {toastAction && (
-            <div
-              className="Toast__button"
-              onClick={(ev: MouseEvent<HTMLDivElement>) => {
-                ev.stopPropagation();
-                ev.preventDefault();
-                toastAction.onClick();
-              }}
-              onKeyDown={(ev: KeyboardEvent<HTMLDivElement>) => {
-                if (ev.key === 'Enter' || ev.key === ' ') {
+            }}
+            onKeyDown={(ev: KeyboardEvent<HTMLDivElement>) => {
+              if (ev.key === 'Enter' || ev.key === ' ') {
+                if (!disableCloseOnClick) {
+                  onClose();
+                }
+              }
+            }}
+            role="button"
+            tabIndex={0}
+          >
+            <div className="Toast__content">{children}</div>
+            {toastAction && (
+              <div
+                className="Toast__button"
+                onClick={(ev: MouseEvent<HTMLDivElement>) => {
                   ev.stopPropagation();
                   ev.preventDefault();
                   toastAction.onClick();
-                }
-              }}
-              ref={focusRef}
-              role="button"
-              tabIndex={0}
-            >
-              {toastAction.label}
-            </div>
-          )}
-        </div>,
-        root
-      )
-    : null;
-};
+                }}
+                onKeyDown={(ev: KeyboardEvent<HTMLDivElement>) => {
+                  if (ev.key === 'Enter' || ev.key === ' ') {
+                    ev.stopPropagation();
+                    ev.preventDefault();
+                    toastAction.onClick();
+                  }
+                }}
+                ref={focusRef}
+                role="button"
+                tabIndex={0}
+              >
+                {toastAction.label}
+              </div>
+            )}
+          </div>,
+          root
+        )
+      : null;
+  }
+);

ts/components/conversation/AudioCapture.tsx

@@ -134,9 +134,9 @@ export const AudioCapture = ({
     completeRecording(conversationId, onSendAudioRecording);
   }, [conversationId, completeRecording, onSendAudioRecording]);
 
-  function closeToast() {
+  const closeToast = useCallback(() => {
     setToastType(undefined);
-  }
+  }, []);
 
   let toastElement: JSX.Element | undefined;
   if (toastType === ToastType.VoiceNoteLimit) {