From 275fece3e3de0bd09377a33813bcfe35e352874b Mon Sep 17 00:00:00 2001 From: Samuel Newman Date: Thu, 14 Aug 2025 01:11:44 +0300 Subject: [Perf - part 3] Stop every dialog control in the entire app rerendering when opening a dialog (#8815) --- src/state/dialogs/index.tsx | 31 +++++++++++++++++-------------- src/view/shell/index.tsx | 4 ++-- 2 files changed, 19 insertions(+), 16 deletions(-) (limited to 'src') 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> } @@ -36,6 +31,13 @@ const DialogControlContext = React.createContext( {} 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(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 ( - {children} + + {children} + ) 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() -- cgit 1.4.1