[Perf - part 3] Stop every dialog control in the entire app rerendering when opening a dialog (#8815)

2 files changed, 19 insertions, 16 deletions

diff --git a/src/state/dialogs/index.tsx b/src/state/dialogs/index.tsx
index f770e9c16..520fb2c84 100644
--- a/src/state/dialogs/index.tsx
+++ b/src/state/dialogs/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 
 import {isWeb} from '#/platform/detection'
-import {DialogControlRefProps} from '#/components/Dialog'
+import {type DialogControlRefProps} from '#/components/Dialog'
 import {Provider as GlobalDialogsProvider} from '#/components/dialogs/Context'
 import {BottomSheetNativeComponent} from '../../../modules/bottom-sheet'
 
@@ -22,11 +22,6 @@ interface IDialogContext {
 interface IDialogControlContext {
   closeAllDialogs(): boolean
   setDialogIsOpen(id: string, isOpen: boolean): void
-  /**
-   * The number of dialogs that are fully expanded. This is used to determine the backgground color of the status bar
-   * on iOS.
-   */
-  fullyExpandedCount: number
   setFullyExpandedCount: React.Dispatch<React.SetStateAction<number>>
 }
 
@@ -36,6 +31,13 @@ const DialogControlContext = React.createContext<IDialogControlContext>(
   {} as IDialogControlContext,
 )
 
+/**
+ * The number of dialogs that are fully expanded. This is used to determine the background color of the status bar
+ * on iOS.
+ */
+const DialogFullyExpandedCountContext = React.createContext<number>(0)
+DialogFullyExpandedCountContext.displayName = 'DialogFullyExpandedCountContext'
+
 export function useDialogStateContext() {
   return React.useContext(DialogContext)
 }
@@ -44,6 +46,11 @@ export function useDialogStateControlContext() {
   return React.useContext(DialogControlContext)
 }
 
+/** The number of dialogs that are fully expanded */
+export function useDialogFullyExpandedCountContext() {
+  return React.useContext(DialogFullyExpandedCountContext)
+}
+
 export function Provider({children}: React.PropsWithChildren<{}>) {
   const [fullyExpandedCount, setFullyExpandedCount] = React.useState(0)
 
@@ -85,21 +92,17 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
     () => ({
       closeAllDialogs,
       setDialogIsOpen,
-      fullyExpandedCount,
       setFullyExpandedCount,
     }),
-    [
-      closeAllDialogs,
-      setDialogIsOpen,
-      fullyExpandedCount,
-      setFullyExpandedCount,
-    ],
+    [closeAllDialogs, setDialogIsOpen, setFullyExpandedCount],
   )
 
   return (
     <DialogContext.Provider value={context}>
       <DialogControlContext.Provider value={controls}>
-        <GlobalDialogsProvider>{children}</GlobalDialogsProvider>
+        <DialogFullyExpandedCountContext.Provider value={fullyExpandedCount}>
+          <GlobalDialogsProvider>{children}</GlobalDialogsProvider>
+        </DialogFullyExpandedCountContext.Provider>
       </DialogControlContext.Provider>
     </DialogContext.Provider>
   )
diff --git a/src/view/shell/index.tsx b/src/view/shell/index.tsx
index 543009a55..04fccc44c 100644
--- a/src/view/shell/index.tsx
+++ b/src/view/shell/index.tsx
@@ -12,7 +12,7 @@ import {useNotificationsHandler} from '#/lib/hooks/useNotificationHandler'
 import {useNotificationsRegistration} from '#/lib/notifications/notifications'
 import {isStateAtTabRoot} from '#/lib/routes/helpers'
 import {isAndroid, isIOS} from '#/platform/detection'
-import {useDialogStateControlContext} from '#/state/dialogs'
+import {useDialogFullyExpandedCountContext} from '#/state/dialogs'
 import {useSession} from '#/state/session'
 import {
   useIsDrawerOpen,
@@ -181,7 +181,7 @@ function ShellInner() {
 }
 
 export const Shell: React.FC = function ShellImpl() {
-  const {fullyExpandedCount} = useDialogStateControlContext()
+  const fullyExpandedCount = useDialogFullyExpandedCountContext()
   const t = useTheme()
   useIntentHandler()