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
import React from 'react'
2
3
import {isWeb} from '#/platform/detection'
4
-
import {DialogControlRefProps} from '#/components/Dialog'
5
import {Provider as GlobalDialogsProvider} from '#/components/dialogs/Context'
6
import {BottomSheetNativeComponent} from '../../../modules/bottom-sheet'
7
···
22
interface IDialogControlContext {
23
closeAllDialogs(): boolean
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
setFullyExpandedCount: React.Dispatch<React.SetStateAction<number>>
31
}
32
···
36
{} as IDialogControlContext,
37
)
38
39
export function useDialogStateContext() {
40
return React.useContext(DialogContext)
41
}
···
44
return React.useContext(DialogControlContext)
45
}
46
47
export function Provider({children}: React.PropsWithChildren<{}>) {
48
const [fullyExpandedCount, setFullyExpandedCount] = React.useState(0)
49
···
85
() => ({
86
closeAllDialogs,
87
setDialogIsOpen,
88
-
fullyExpandedCount,
89
setFullyExpandedCount,
90
}),
91
-
[
92
-
closeAllDialogs,
93
-
setDialogIsOpen,
94
-
fullyExpandedCount,
95
-
setFullyExpandedCount,
96
-
],
97
)
98
99
return (
100
<DialogContext.Provider value={context}>
101
<DialogControlContext.Provider value={controls}>
102
-
<GlobalDialogsProvider>{children}</GlobalDialogsProvider>
103
</DialogControlContext.Provider>
104
</DialogContext.Provider>
105
)
···
1
import React from 'react'
2
3
import {isWeb} from '#/platform/detection'
4
+
import {type DialogControlRefProps} from '#/components/Dialog'
5
import {Provider as GlobalDialogsProvider} from '#/components/dialogs/Context'
6
import {BottomSheetNativeComponent} from '../../../modules/bottom-sheet'
7
···
22
interface IDialogControlContext {
23
closeAllDialogs(): boolean
24
setDialogIsOpen(id: string, isOpen: boolean): void
25
setFullyExpandedCount: React.Dispatch<React.SetStateAction<number>>
26
}
27
···
31
{} as IDialogControlContext,
32
)
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
+
41
export function useDialogStateContext() {
42
return React.useContext(DialogContext)
43
}
···
46
return React.useContext(DialogControlContext)
47
}
48
49
+
/** The number of dialogs that are fully expanded */
50
+
export function useDialogFullyExpandedCountContext() {
51
+
return React.useContext(DialogFullyExpandedCountContext)
52
+
}
53
+
54
export function Provider({children}: React.PropsWithChildren<{}>) {
55
const [fullyExpandedCount, setFullyExpandedCount] = React.useState(0)
56
···
92
() => ({
93
closeAllDialogs,
94
setDialogIsOpen,
95
setFullyExpandedCount,
96
}),
97
+
[closeAllDialogs, setDialogIsOpen, setFullyExpandedCount],
98
)
99
100
return (
101
<DialogContext.Provider value={context}>
102
<DialogControlContext.Provider value={controls}>
103
+
<DialogFullyExpandedCountContext.Provider value={fullyExpandedCount}>
104
+
<GlobalDialogsProvider>{children}</GlobalDialogsProvider>
105
+
</DialogFullyExpandedCountContext.Provider>
106
</DialogControlContext.Provider>
107
</DialogContext.Provider>
108
)
+2
-2
src/view/shell/index.tsx
+2
-2
src/view/shell/index.tsx
···
12
import {useNotificationsRegistration} from '#/lib/notifications/notifications'
13
import {isStateAtTabRoot} from '#/lib/routes/helpers'
14
import {isAndroid, isIOS} from '#/platform/detection'
15
-
import {useDialogStateControlContext} from '#/state/dialogs'
16
import {useSession} from '#/state/session'
17
import {
18
useIsDrawerOpen,
···
181
}
182
183
export const Shell: React.FC = function ShellImpl() {
184
-
const {fullyExpandedCount} = useDialogStateControlContext()
185
const t = useTheme()
186
useIntentHandler()
187
···
12
import {useNotificationsRegistration} from '#/lib/notifications/notifications'
13
import {isStateAtTabRoot} from '#/lib/routes/helpers'
14
import {isAndroid, isIOS} from '#/platform/detection'
15
+
import {useDialogFullyExpandedCountContext} from '#/state/dialogs'
16
import {useSession} from '#/state/session'
17
import {
18
useIsDrawerOpen,
···
181
}
182
183
export const Shell: React.FC = function ShellImpl() {
184
+
const fullyExpandedCount = useDialogFullyExpandedCountContext()
185
const t = useTheme()
186
useIntentHandler()
187