chore: app group optimizations (#1027)

2022-05-16 21:14:18 -05:00
parent 754a189532
commit 62cf34e894
108 changed files with 1796 additions and 1187 deletions
--- a/app/assets/javascripts/Components/AccountMenu/AdvancedOptions.tsx
+++ b/app/assets/javascripts/Components/AccountMenu/AdvancedOptions.tsx
@@ -2,7 +2,7 @@ import { WebApplication } from '@/UIModels/Application'
 import { AppState } from '@/UIModels/AppState'
 import { observer } from 'mobx-react-lite'
 import { FunctionComponent } from 'preact'
-import { useEffect, useState } from 'preact/hooks'
+import { useCallback, useEffect, useState } from 'preact/hooks'
 import { Checkbox } from '@/Components/Checkbox'
 import { DecoratedInput } from '@/Components/Input/DecoratedInput'
 import { Icon } from '@/Components/Icon'
@@ -51,38 +51,44 @@ export const AdvancedOptions: FunctionComponent<Props> = observer(
      onPrivateWorkspaceChange?.(isPrivateWorkspace)
    }, [isPrivateWorkspace, onPrivateWorkspaceChange])

-    const handleIsPrivateWorkspaceChange = () => {
+    const handleIsPrivateWorkspaceChange = useCallback(() => {
      setIsPrivateWorkspace(!isPrivateWorkspace)
-    }
+    }, [isPrivateWorkspace])

-    const handlePrivateWorkspaceNameChange = (name: string) => {
+    const handlePrivateWorkspaceNameChange = useCallback((name: string) => {
      setPrivateWorkspaceName(name)
-    }
+    }, [])

-    const handlePrivateWorkspaceUserphraseChange = (userphrase: string) => {
+    const handlePrivateWorkspaceUserphraseChange = useCallback((userphrase: string) => {
      setPrivateWorkspaceUserphrase(userphrase)
-    }
+    }, [])

-    const handleServerOptionChange = (e: Event) => {
-      if (e.target instanceof HTMLInputElement) {
-        setEnableServerOption(e.target.checked)
-      }
-    }
+    const handleServerOptionChange = useCallback(
+      (e: Event) => {
+        if (e.target instanceof HTMLInputElement) {
+          setEnableServerOption(e.target.checked)
+        }
+      },
+      [setEnableServerOption],
+    )

-    const handleSyncServerChange = (server: string) => {
-      setServer(server)
-      application.setCustomHost(server).catch(console.error)
-    }
+    const handleSyncServerChange = useCallback(
+      (server: string) => {
+        setServer(server)
+        application.setCustomHost(server).catch(console.error)
+      },
+      [application, setServer],
+    )

-    const handleStrictSigninChange = () => {
+    const handleStrictSigninChange = useCallback(() => {
      const newValue = !isStrictSignin
      setIsStrictSignin(newValue)
      onStrictSignInChange?.(newValue)
-    }
+    }, [isStrictSignin, onStrictSignInChange])

-    const toggleShowAdvanced = () => {
+    const toggleShowAdvanced = useCallback(() => {
      setShowAdvanced(!showAdvanced)
-    }
+    }, [showAdvanced])

    return (
      <>
--- a/app/assets/javascripts/Components/AccountMenu/ConfirmPassword.tsx
+++ b/app/assets/javascripts/Components/AccountMenu/ConfirmPassword.tsx
@@ -3,7 +3,7 @@ import { WebApplication } from '@/UIModels/Application'
 import { AppState } from '@/UIModels/AppState'
 import { observer } from 'mobx-react-lite'
 import { FunctionComponent } from 'preact'
-import { useEffect, useRef, useState } from 'preact/hooks'
+import { useCallback, useEffect, useRef, useState } from 'preact/hooks'
 import { AccountMenuPane } from '.'
 import { Button } from '@/Components/Button/Button'
 import { Checkbox } from '@/Components/Checkbox'
@@ -34,63 +34,69 @@ export const ConfirmPassword: FunctionComponent<Props> = observer(
      passwordInputRef.current?.focus()
    }, [])

-    const handlePasswordChange = (text: string) => {
+    const handlePasswordChange = useCallback((text: string) => {
      setConfirmPassword(text)
-    }
+    }, [])

-    const handleEphemeralChange = () => {
+    const handleEphemeralChange = useCallback(() => {
      setIsEphemeral(!isEphemeral)
-    }
+    }, [isEphemeral])

-    const handleShouldMergeChange = () => {
+    const handleShouldMergeChange = useCallback(() => {
      setShouldMergeLocal(!shouldMergeLocal)
-    }
+    }, [shouldMergeLocal])

-    const handleKeyDown = (e: KeyboardEvent) => {
-      if (error.length) {
-        setError('')
-      }
-      if (e.key === 'Enter') {
-        handleConfirmFormSubmit(e)
-      }
-    }
+    const handleConfirmFormSubmit = useCallback(
+      (e: Event) => {
+        e.preventDefault()

-    const handleConfirmFormSubmit = (e: Event) => {
-      e.preventDefault()
+        if (!password) {
+          passwordInputRef.current?.focus()
+          return
+        }

-      if (!password) {
-        passwordInputRef.current?.focus()
-        return
-      }
+        if (password === confirmPassword) {
+          setIsRegistering(true)
+          application
+            .register(email, password, isEphemeral, shouldMergeLocal)
+            .then((res) => {
+              if (res.error) {
+                throw new Error(res.error.message)
+              }
+              appState.accountMenu.closeAccountMenu()
+              appState.accountMenu.setCurrentPane(AccountMenuPane.GeneralMenu)
+            })
+            .catch((err) => {
+              console.error(err)
+              setError(err.message)
+            })
+            .finally(() => {
+              setIsRegistering(false)
+            })
+        } else {
+          setError(STRING_NON_MATCHING_PASSWORDS)
+          setConfirmPassword('')
+          passwordInputRef.current?.focus()
+        }
+      },
+      [appState, application, confirmPassword, email, isEphemeral, password, shouldMergeLocal],
+    )

-      if (password === confirmPassword) {
-        setIsRegistering(true)
-        application
-          .register(email, password, isEphemeral, shouldMergeLocal)
-          .then((res) => {
-            if (res.error) {
-              throw new Error(res.error.message)
-            }
-            appState.accountMenu.closeAccountMenu()
-            appState.accountMenu.setCurrentPane(AccountMenuPane.GeneralMenu)
-          })
-          .catch((err) => {
-            console.error(err)
-            setError(err.message)
-          })
-          .finally(() => {
-            setIsRegistering(false)
-          })
-      } else {
-        setError(STRING_NON_MATCHING_PASSWORDS)
-        setConfirmPassword('')
-        passwordInputRef.current?.focus()
-      }
-    }
+    const handleKeyDown = useCallback(
+      (e: KeyboardEvent) => {
+        if (error.length) {
+          setError('')
+        }
+        if (e.key === 'Enter') {
+          handleConfirmFormSubmit(e)
+        }
+      },
+      [handleConfirmFormSubmit, error],
+    )

-    const handleGoBack = () => {
+    const handleGoBack = useCallback(() => {
      setMenuPane(AccountMenuPane.Register)
-    }
+    }, [setMenuPane])

    return (
      <>
--- a/app/assets/javascripts/Components/AccountMenu/CreateAccount.tsx
+++ b/app/assets/javascripts/Components/AccountMenu/CreateAccount.tsx
@@ -2,7 +2,7 @@ import { WebApplication } from '@/UIModels/Application'
 import { AppState } from '@/UIModels/AppState'
 import { observer } from 'mobx-react-lite'
 import { FunctionComponent } from 'preact'
-import { StateUpdater, useEffect, useRef, useState } from 'preact/hooks'
+import { StateUpdater, useCallback, useEffect, useRef, useState } from 'preact/hooks'
 import { AccountMenuPane } from '.'
 import { Button } from '@/Components/Button/Button'
 import { DecoratedInput } from '@/Components/Input/DecoratedInput'
@@ -33,50 +33,65 @@ export const CreateAccount: FunctionComponent<Props> = observer(
      }
    }, [])

-    const handleEmailChange = (text: string) => {
-      setEmail(text)
-    }
+    const handleEmailChange = useCallback(
+      (text: string) => {
+        setEmail(text)
+      },
+      [setEmail],
+    )

-    const handlePasswordChange = (text: string) => {
-      setPassword(text)
-    }
+    const handlePasswordChange = useCallback(
+      (text: string) => {
+        setPassword(text)
+      },
+      [setPassword],
+    )

-    const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.key === 'Enter') {
-        handleRegisterFormSubmit(e)
-      }
-    }
+    const handleRegisterFormSubmit = useCallback(
+      (e: Event) => {
+        e.preventDefault()

-    const handleRegisterFormSubmit = (e: Event) => {
-      e.preventDefault()
+        if (!email || email.length === 0) {
+          emailInputRef.current?.focus()
+          return
+        }

-      if (!email || email.length === 0) {
-        emailInputRef.current?.focus()
-        return
-      }
+        if (!password || password.length === 0) {
+          passwordInputRef.current?.focus()
+          return
+        }

-      if (!password || password.length === 0) {
-        passwordInputRef.current?.focus()
-        return
-      }
+        setEmail(email)
+        setPassword(password)
+        setMenuPane(AccountMenuPane.ConfirmPassword)
+      },
+      [email, password, setPassword, setMenuPane, setEmail],
+    )

-      setEmail(email)
-      setPassword(password)
-      setMenuPane(AccountMenuPane.ConfirmPassword)
-    }
+    const handleKeyDown = useCallback(
+      (e: KeyboardEvent) => {
+        if (e.key === 'Enter') {
+          handleRegisterFormSubmit(e)
+        }
+      },
+      [handleRegisterFormSubmit],
+    )

-    const handleClose = () => {
+    const handleClose = useCallback(() => {
      setMenuPane(AccountMenuPane.GeneralMenu)
      setEmail('')
      setPassword('')
-    }
+    }, [setEmail, setMenuPane, setPassword])

-    const onPrivateWorkspaceChange = (isPrivateWorkspace: boolean, privateWorkspaceIdentifier?: string) => {
-      setIsPrivateWorkspace(isPrivateWorkspace)
-      if (isPrivateWorkspace && privateWorkspaceIdentifier) {
-        setEmail(privateWorkspaceIdentifier)
-      }
-    }
+    const onPrivateWorkspaceChange = useCallback(
+      (isPrivateWorkspace: boolean, privateWorkspaceIdentifier?: string) => {
+        setIsPrivateWorkspace(isPrivateWorkspace)
+        if (isPrivateWorkspace && privateWorkspaceIdentifier) {
+          setEmail(privateWorkspaceIdentifier)
+        }
+      },
+      [setEmail],
+    )

    return (
      <>
--- a/app/assets/javascripts/Components/AccountMenu/GeneralAccountMenu.tsx
+++ b/app/assets/javascripts/Components/AccountMenu/GeneralAccountMenu.tsx
@@ -5,7 +5,7 @@ import { Icon } from '@/Components/Icon'
 import { formatLastSyncDate } from '@/Components/Preferences/Panes/Account/Sync'
 import { SyncQueueStrategy } from '@standardnotes/snjs'
 import { STRING_GENERIC_SYNC_ERROR } from '@/Strings'
-import { useState } from 'preact/hooks'
+import { useCallback, useMemo, useState } from 'preact/hooks'
 import { AccountMenuPane } from '.'
 import { FunctionComponent } from 'preact'
 import { Menu } from '@/Components/Menu/Menu'
@@ -28,7 +28,7 @@ export const GeneralAccountMenu: FunctionComponent<Props> = observer(
    const [isSyncingInProgress, setIsSyncingInProgress] = useState(false)
    const [lastSyncDate, setLastSyncDate] = useState(formatLastSyncDate(application.sync.getLastSyncDate() as Date))

-    const doSynchronization = async () => {
+    const doSynchronization = useCallback(async () => {
      setIsSyncingInProgress(true)

      application.sync
@@ -49,9 +49,33 @@ export const GeneralAccountMenu: FunctionComponent<Props> = observer(
        .finally(() => {
          setIsSyncingInProgress(false)
        })
-    }
+    }, [application])

-    const user = application.getUser()
+    const user = useMemo(() => application.getUser(), [application])
+
+    const openPreferences = useCallback(() => {
+      appState.accountMenu.closeAccountMenu()
+      appState.preferences.setCurrentPane('account')
+      appState.preferences.openPreferences()
+    }, [appState])
+
+    const openHelp = useCallback(() => {
+      appState.accountMenu.closeAccountMenu()
+      appState.preferences.setCurrentPane('help-feedback')
+      appState.preferences.openPreferences()
+    }, [appState])
+
+    const signOut = useCallback(() => {
+      appState.accountMenu.setSigningOut(true)
+    }, [appState])
+
+    const activateRegisterPane = useCallback(() => {
+      setMenuPane(AccountMenuPane.Register)
+    }, [setMenuPane])
+
+    const activateSignInPane = useCallback(() => {
+      setMenuPane(AccountMenuPane.SignIn)
+    }, [setMenuPane])

    const CREATE_ACCOUNT_INDEX = 1
    const SWITCHER_INDEX = 0
@@ -115,48 +139,23 @@ export const GeneralAccountMenu: FunctionComponent<Props> = observer(
          <WorkspaceSwitcherOption mainApplicationGroup={mainApplicationGroup} appState={appState} />
          <MenuItemSeparator />
          {user ? (
-            <MenuItem
-              type={MenuItemType.IconButton}
-              onClick={() => {
-                appState.accountMenu.closeAccountMenu()
-                appState.preferences.setCurrentPane('account')
-                appState.preferences.openPreferences()
-              }}
-            >
+            <MenuItem type={MenuItemType.IconButton} onClick={openPreferences}>
              <Icon type="user" className={iconClassName} />
              Account settings
            </MenuItem>
          ) : (
            <>
-              <MenuItem
-                type={MenuItemType.IconButton}
-                onClick={() => {
-                  setMenuPane(AccountMenuPane.Register)
-                }}
-              >
+              <MenuItem type={MenuItemType.IconButton} onClick={activateRegisterPane}>
                <Icon type="user" className={iconClassName} />
                Create free account
              </MenuItem>
-              <MenuItem
-                type={MenuItemType.IconButton}
-                onClick={() => {
-                  setMenuPane(AccountMenuPane.SignIn)
-                }}
-              >
+              <MenuItem type={MenuItemType.IconButton} onClick={activateSignInPane}>
                <Icon type="signIn" className={iconClassName} />
                Sign in
              </MenuItem>
            </>
          )}
-          <MenuItem
-            className="justify-between"
-            type={MenuItemType.IconButton}
-            onClick={() => {
-              appState.accountMenu.closeAccountMenu()
-              appState.preferences.setCurrentPane('help-feedback')
-              appState.preferences.openPreferences()
-            }}
-          >
+          <MenuItem className="justify-between" type={MenuItemType.IconButton} onClick={openHelp}>
            <div className="flex items-center">
              <Icon type="help" className={iconClassName} />
              Help &amp; feedback
@@ -166,12 +165,7 @@ export const GeneralAccountMenu: FunctionComponent<Props> = observer(
          {user ? (
            <>
              <MenuItemSeparator />
-              <MenuItem
-                type={MenuItemType.IconButton}
-                onClick={() => {
-                  appState.accountMenu.setSigningOut(true)
-                }}
-              >
+              <MenuItem type={MenuItemType.IconButton} onClick={signOut}>
                <Icon type="signOut" className={iconClassName} />
                Sign out workspace
              </MenuItem>
--- a/app/assets/javascripts/Components/AccountMenu/SignIn.tsx
+++ b/app/assets/javascripts/Components/AccountMenu/SignIn.tsx
@@ -44,36 +44,39 @@ export const SignInPane: FunctionComponent<Props> = observer(({ application, app
    }
  }, [])

-  const resetInvalid = () => {
+  const resetInvalid = useCallback(() => {
    if (error.length) {
      setError('')
    }
-  }
+  }, [setError, error])

-  const handleEmailChange = (text: string) => {
+  const handleEmailChange = useCallback((text: string) => {
    setEmail(text)
-  }
+  }, [])

-  const handlePasswordChange = (text: string) => {
-    if (error.length) {
-      setError('')
-    }
-    setPassword(text)
-  }
+  const handlePasswordChange = useCallback(
+    (text: string) => {
+      if (error.length) {
+        setError('')
+      }
+      setPassword(text)
+    },
+    [setPassword, error],
+  )

-  const handleEphemeralChange = () => {
+  const handleEphemeralChange = useCallback(() => {
    setIsEphemeral(!isEphemeral)
-  }
+  }, [isEphemeral])

-  const handleStrictSigninChange = () => {
+  const handleStrictSigninChange = useCallback(() => {
    setIsStrictSignin(!isStrictSignin)
-  }
+  }, [isStrictSignin])

-  const handleShouldMergeChange = () => {
+  const handleShouldMergeChange = useCallback(() => {
    setShouldMergeLocal(!shouldMergeLocal)
-  }
+  }, [shouldMergeLocal])

-  const signIn = () => {
+  const signIn = useCallback(() => {
    setIsSigningIn(true)
    emailInputRef?.current?.blur()
    passwordInputRef?.current?.blur()
@@ -95,13 +98,7 @@ export const SignInPane: FunctionComponent<Props> = observer(({ application, app
      .finally(() => {
        setIsSigningIn(false)
      })
-  }
-
-  const handleKeyDown = (e: KeyboardEvent) => {
-    if (e.key === 'Enter') {
-      handleSignInFormSubmit(e)
-    }
-  }
+  }, [appState, application, email, isEphemeral, isStrictSignin, password, shouldMergeLocal])

  const onPrivateWorkspaceChange = useCallback(
    (newIsPrivateWorkspace: boolean, privateWorkspaceIdentifier?: string) => {
@@ -113,21 +110,33 @@ export const SignInPane: FunctionComponent<Props> = observer(({ application, app
    [setEmail],
  )

-  const handleSignInFormSubmit = (e: Event) => {
-    e.preventDefault()
+  const handleSignInFormSubmit = useCallback(
+    (e: Event) => {
+      e.preventDefault()

-    if (!email || email.length === 0) {
-      emailInputRef?.current?.focus()
-      return
-    }
+      if (!email || email.length === 0) {
+        emailInputRef?.current?.focus()
+        return
+      }

-    if (!password || password.length === 0) {
-      passwordInputRef?.current?.focus()
-      return
-    }
+      if (!password || password.length === 0) {
+        passwordInputRef?.current?.focus()
+        return
+      }

-    signIn()
-  }
+      signIn()
+    },
+    [email, password, signIn],
+  )
+
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent) => {
+      if (e.key === 'Enter') {
+        handleSignInFormSubmit(e)
+      }
+    },
+    [handleSignInFormSubmit],
+  )

  return (
    <>
--- a/app/assets/javascripts/Components/AccountMenu/WorkspaceSwitcher/WorkspaceMenuItem.tsx
+++ b/app/assets/javascripts/Components/AccountMenu/WorkspaceSwitcher/WorkspaceMenuItem.tsx
@@ -1,9 +1,9 @@
 import { Icon } from '@/Components/Icon'
 import { MenuItem, MenuItemType } from '@/Components/Menu/MenuItem'
 import { KeyboardKey } from '@/Services/IOService'
-import { ApplicationDescriptor } from '@standardnotes/snjs/dist/@types'
+import { ApplicationDescriptor } from '@standardnotes/snjs'
 import { FunctionComponent } from 'preact'
-import { useEffect, useRef, useState } from 'preact/hooks'
+import { useCallback, useEffect, useRef, useState } from 'preact/hooks'

 type Props = {
  descriptor: ApplicationDescriptor
@@ -29,17 +29,20 @@ export const WorkspaceMenuItem: FunctionComponent<Props> = ({
    }
  }, [isRenaming])

-  const handleInputKeyDown = (event: KeyboardEvent) => {
+  const handleInputKeyDown = useCallback((event: KeyboardEvent) => {
    if (event.key === KeyboardKey.Enter) {
      inputRef.current?.blur()
    }
-  }
+  }, [])

-  const handleInputBlur = (event: FocusEvent) => {
-    const name = (event.target as HTMLInputElement).value
-    renameDescriptor(name)
-    setIsRenaming(false)
-  }
+  const handleInputBlur = useCallback(
+    (event: FocusEvent) => {
+      const name = (event.target as HTMLInputElement).value
+      renameDescriptor(name)
+      setIsRenaming(false)
+    },
+    [renameDescriptor],
+  )

  return (
    <MenuItem
--- a/app/assets/javascripts/Components/AccountMenu/WorkspaceSwitcher/WorkspaceSwitcherMenu.tsx
+++ b/app/assets/javascripts/Components/AccountMenu/WorkspaceSwitcher/WorkspaceSwitcherMenu.tsx
@@ -1,6 +1,6 @@
 import { ApplicationGroup } from '@/UIModels/ApplicationGroup'
 import { AppState } from '@/UIModels/AppState'
-import { ApplicationDescriptor, ButtonType } from '@standardnotes/snjs'
+import { ApplicationDescriptor, ApplicationGroupEvent, ButtonType } from '@standardnotes/snjs'
 import { observer } from 'mobx-react-lite'
 import { FunctionComponent } from 'preact'
 import { useCallback, useEffect, useState } from 'preact/hooks'
@@ -17,13 +17,18 @@ type Props = {
 }

 export const WorkspaceSwitcherMenu: FunctionComponent<Props> = observer(
-  ({ mainApplicationGroup, appState, isOpen, hideWorkspaceOptions = false }) => {
+  ({ mainApplicationGroup, appState, isOpen, hideWorkspaceOptions = false }: Props) => {
    const [applicationDescriptors, setApplicationDescriptors] = useState<ApplicationDescriptor[]>([])

    useEffect(() => {
-      const removeAppGroupObserver = mainApplicationGroup.addApplicationChangeObserver(() => {
-        const applicationDescriptors = mainApplicationGroup.getDescriptors()
-        setApplicationDescriptors(applicationDescriptors)
+      const applicationDescriptors = mainApplicationGroup.getDescriptors()
+      setApplicationDescriptors(applicationDescriptors)
+
+      const removeAppGroupObserver = mainApplicationGroup.addEventObserver((event) => {
+        if (event === ApplicationGroupEvent.DescriptorsDataChanged) {
+          const applicationDescriptors = mainApplicationGroup.getDescriptors()
+          setApplicationDescriptors(applicationDescriptors)
+        }
      })

      return () => {
@@ -42,20 +47,21 @@ export const WorkspaceSwitcherMenu: FunctionComponent<Props> = observer(
        return
      }
      mainApplicationGroup.signOutAllWorkspaces().catch(console.error)
-    }, [mainApplicationGroup, appState.application.alertService])
+    }, [mainApplicationGroup, appState])
+
+    const destroyWorkspace = useCallback(() => {
+      appState.accountMenu.setSigningOut(true)
+    }, [appState])

    return (
      <Menu a11yLabel="Workspace switcher menu" className="px-0 focus:shadow-none" isOpen={isOpen}>
        {applicationDescriptors.map((descriptor) => (
          <WorkspaceMenuItem
+            key={descriptor.identifier}
            descriptor={descriptor}
            hideOptions={hideWorkspaceOptions}
-            onDelete={() => {
-              appState.accountMenu.setSigningOut(true)
-            }}
-            onClick={() => {
-              mainApplicationGroup.loadApplicationForDescriptor(descriptor)
-            }}
+            onDelete={destroyWorkspace}
+            onClick={() => void mainApplicationGroup.unloadCurrentAndActivateDescriptor(descriptor)}
            renameDescriptor={(label: string) => mainApplicationGroup.renameDescriptor(descriptor, label)}
          />
        ))}
@@ -64,7 +70,7 @@ export const WorkspaceSwitcherMenu: FunctionComponent<Props> = observer(
        <MenuItem
          type={MenuItemType.IconButton}
          onClick={() => {
-            mainApplicationGroup.addNewApplication()
+            void mainApplicationGroup.unloadCurrentAndCreateNewDescriptor()
          }}
        >
          <Icon type="user-add" className="color-neutral mr-2" />
--- a/app/assets/javascripts/Components/AccountMenu/WorkspaceSwitcher/WorkspaceSwitcherOption.tsx
+++ b/app/assets/javascripts/Components/AccountMenu/WorkspaceSwitcher/WorkspaceSwitcherOption.tsx
@@ -4,7 +4,7 @@ import { AppState } from '@/UIModels/AppState'
 import { calculateSubmenuStyle, SubmenuStyle } from '@/Utils/CalculateSubmenuStyle'
 import { observer } from 'mobx-react-lite'
 import { FunctionComponent } from 'preact'
-import { useEffect, useRef, useState } from 'preact/hooks'
+import { useCallback, useEffect, useRef, useState } from 'preact/hooks'
 import { Icon } from '@/Components/Icon'
 import { WorkspaceSwitcherMenu } from './WorkspaceSwitcherMenu'

@@ -19,7 +19,7 @@ export const WorkspaceSwitcherOption: FunctionComponent<Props> = observer(({ mai
  const [isOpen, setIsOpen] = useState(false)
  const [menuStyle, setMenuStyle] = useState<SubmenuStyle>()

-  const toggleMenu = () => {
+  const toggleMenu = useCallback(() => {
    if (!isOpen) {
      const menuPosition = calculateSubmenuStyle(buttonRef.current)
      if (menuPosition) {
@@ -28,7 +28,7 @@ export const WorkspaceSwitcherOption: FunctionComponent<Props> = observer(({ mai
    }

    setIsOpen(!isOpen)
-  }
+  }, [isOpen, setIsOpen])

  useEffect(() => {
    if (isOpen) {
--- a/app/assets/javascripts/Components/AccountMenu/index.tsx
+++ b/app/assets/javascripts/Components/AccountMenu/index.tsx
@@ -2,7 +2,7 @@ import { observer } from 'mobx-react-lite'
 import { useCloseOnClickOutside } from '@/Hooks/useCloseOnClickOutside'
 import { AppState } from '@/UIModels/AppState'
 import { WebApplication } from '@/UIModels/Application'
-import { useRef, useState } from 'preact/hooks'
+import { useCallback, useRef, useState } from 'preact/hooks'
 import { GeneralAccountMenu } from './GeneralAccountMenu'
 import { FunctionComponent } from 'preact'
 import { SignInPane } from './SignIn'
@@ -80,26 +80,40 @@ const MenuPaneSelector: FunctionComponent<PaneSelectorProps> = observer(

 export const AccountMenu: FunctionComponent<Props> = observer(
  ({ application, appState, onClickOutside, mainApplicationGroup }) => {
-    const { currentPane, setCurrentPane, shouldAnimateCloseMenu, closeAccountMenu } = appState.accountMenu
+    const { currentPane, shouldAnimateCloseMenu } = appState.accountMenu
+
+    const closeAccountMenu = useCallback(() => {
+      appState.accountMenu.closeAccountMenu()
+    }, [appState])
+
+    const setCurrentPane = useCallback(
+      (pane: AccountMenuPane) => {
+        appState.accountMenu.setCurrentPane(pane)
+      },
+      [appState],
+    )

    const ref = useRef<HTMLDivElement>(null)
    useCloseOnClickOutside(ref, () => {
      onClickOutside()
    })

-    const handleKeyDown: JSXInternal.KeyboardEventHandler<HTMLDivElement> = (event) => {
-      switch (event.key) {
-        case 'Escape':
-          if (currentPane === AccountMenuPane.GeneralMenu) {
-            closeAccountMenu()
-          } else if (currentPane === AccountMenuPane.ConfirmPassword) {
-            setCurrentPane(AccountMenuPane.Register)
-          } else {
-            setCurrentPane(AccountMenuPane.GeneralMenu)
-          }
-          break
-      }
-    }
+    const handleKeyDown: JSXInternal.KeyboardEventHandler<HTMLDivElement> = useCallback(
+      (event) => {
+        switch (event.key) {
+          case 'Escape':
+            if (currentPane === AccountMenuPane.GeneralMenu) {
+              closeAccountMenu()
+            } else if (currentPane === AccountMenuPane.ConfirmPassword) {
+              setCurrentPane(AccountMenuPane.Register)
+            } else {
+              setCurrentPane(AccountMenuPane.GeneralMenu)
+            }
+            break
+        }
+      },
+      [closeAccountMenu, currentPane, setCurrentPane],
+    )

    return (
      <div ref={ref} id="account-menu" className="sn-component">