ansxor.ca
forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
[Perf - part 3] Stop every dialog control in the entire app rerendering when opening a dialog (#8815)
samuel.fm
+17
-14
src/state/dialogs/index.tsx
+17
-14
src/state/dialogs/index.tsx
···
1
1
import React from 'react'
2
2
3
3
import {isWeb} from '#/platform/detection'
4
-
import {DialogControlRefProps} from '#/components/Dialog'
4
+
import {type DialogControlRefProps} from '#/components/Dialog'
5
5
import {Provider as GlobalDialogsProvider} from '#/components/dialogs/Context'
6
6
import {BottomSheetNativeComponent} from '../../../modules/bottom-sheet'
7
7
···
22
22
interface IDialogControlContext {
23
23
closeAllDialogs(): boolean
24
24
setDialogIsOpen(id: string, isOpen: boolean): void
25
-
/**
26
-
* The number of dialogs that are fully expanded. This is used to determine the backgground color of the status bar
27
-
* on iOS.
28
-
*/
29
-
fullyExpandedCount: number
30
25
setFullyExpandedCount: React.Dispatch<React.SetStateAction<number>>
31
26
}
32
27
···
36
31
{} as IDialogControlContext,
37
32
)
38
33
34
+
/**
35
+
* The number of dialogs that are fully expanded. This is used to determine the background color of the status bar
36
+
* on iOS.
37
+
*/
38
+
const DialogFullyExpandedCountContext = React.createContext<number>(0)
39
+
DialogFullyExpandedCountContext.displayName = 'DialogFullyExpandedCountContext'
40
+
39
41
export function useDialogStateContext() {
40
42
return React.useContext(DialogContext)
41
43
}
···
44
46
return React.useContext(DialogControlContext)
45
47
}
46
48
49
+
/** The number of dialogs that are fully expanded */
50
+
export function useDialogFullyExpandedCountContext() {
51
+
return React.useContext(DialogFullyExpandedCountContext)
52
+
}
53
+
47
54
export function Provider({children}: React.PropsWithChildren<{}>) {
48
55
const [fullyExpandedCount, setFullyExpandedCount] = React.useState(0)
49
56
···
85
92
() => ({
86
93
closeAllDialogs,
87
94
setDialogIsOpen,
88
-
fullyExpandedCount,
89
95
setFullyExpandedCount,
90
96
}),
91
-
[
92
-
closeAllDialogs,
93
-
setDialogIsOpen,
94
-
fullyExpandedCount,
95
-
setFullyExpandedCount,
96
-
],
97
+
[closeAllDialogs, setDialogIsOpen, setFullyExpandedCount],
97
98
)
98
99
99
100
return (
100
101
<DialogContext.Provider value={context}>
101
102
<DialogControlContext.Provider value={controls}>
102
-
<GlobalDialogsProvider>{children}</GlobalDialogsProvider>
103
+
<DialogFullyExpandedCountContext.Provider value={fullyExpandedCount}>
104
+
<GlobalDialogsProvider>{children}</GlobalDialogsProvider>
105
+
</DialogFullyExpandedCountContext.Provider>
103
106
</DialogControlContext.Provider>
104
107
</DialogContext.Provider>
105
108
)
+2
-2
src/view/shell/index.tsx
+2
-2
src/view/shell/index.tsx
···
12
12
import {useNotificationsRegistration} from '#/lib/notifications/notifications'
13
13
import {isStateAtTabRoot} from '#/lib/routes/helpers'
14
14
import {isAndroid, isIOS} from '#/platform/detection'
15
-
import {useDialogStateControlContext} from '#/state/dialogs'
15
+
import {useDialogFullyExpandedCountContext} from '#/state/dialogs'
16
16
import {useSession} from '#/state/session'
17
17
import {
18
18
useIsDrawerOpen,
···
181
181
}
182
182
183
183
export const Shell: React.FC = function ShellImpl() {
184
-
const {fullyExpandedCount} = useDialogStateControlContext()
184
+
const fullyExpandedCount = useDialogFullyExpandedCountContext()
185
185
const t = useTheme()
186
186
useIntentHandler()
187
187