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,7 +25,8 @@ export type PropsType = {
   };
 };
 
-export const Toast = ({
+export const Toast = memo(
+  ({
     autoDismissDisabled = false,
     children,
     className,
@@ -27,7 +34,7 @@ export const Toast = ({
     onClose,
     timeout = 8000,
     toastAction,
-}: PropsType): JSX.Element | null => {
+  }: PropsType): JSX.Element | null => {
     const [root, setRoot] = React.useState<HTMLElement | null>(null);
     const [focusRef] = useRestoreFocus();
 
@@ -103,4 +110,5 @@ export const Toast = ({
           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) {