forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Use non-reactive callbacks for some methods (#1948)
* Use non-reactive callbacks for some methods
* Remove unnecessary state
* Use non-reactive callbacks for modals
+34
-39
+6
-8
src/state/lightbox.tsx
+6
-8
src/state/lightbox.tsx
···
1
1
import React from 'react'
2
2
import {AppBskyActorDefs} from '@atproto/api'
3
+
import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback'
3
4
4
5
interface Lightbox {
5
6
name: string
···
42
43
null,
43
44
)
44
45
45
-
const openLightbox = React.useCallback(
46
-
(lightbox: Lightbox) => {
47
-
setActiveLightbox(lightbox)
48
-
},
49
-
[setActiveLightbox],
50
-
)
46
+
const openLightbox = useNonReactiveCallback((lightbox: Lightbox) => {
47
+
setActiveLightbox(lightbox)
48
+
})
51
49
52
-
const closeLightbox = React.useCallback(() => {
50
+
const closeLightbox = useNonReactiveCallback(() => {
53
51
let wasActive = !!activeLightbox
54
52
setActiveLightbox(null)
55
53
return wasActive
56
-
}, [setActiveLightbox, activeLightbox])
54
+
})
57
55
58
56
const state = React.useMemo(
59
57
() => ({
+13
-22
src/state/modals/index.tsx
+13
-22
src/state/modals/index.tsx
···
5
5
6
6
import {ImageModel} from '#/state/models/media/image'
7
7
import {GalleryModel} from '#/state/models/media/gallery'
8
+
import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback'
8
9
9
10
export interface ConfirmModal {
10
11
name: 'confirm'
···
236
237
}
237
238
238
239
export function Provider({children}: React.PropsWithChildren<{}>) {
239
-
const [isModalActive, setIsModalActive] = React.useState(false)
240
240
const [activeModals, setActiveModals] = React.useState<Modal[]>([])
241
241
242
-
const openModal = React.useCallback(
243
-
(modal: Modal) => {
244
-
setActiveModals(activeModals => [...activeModals, modal])
245
-
setIsModalActive(true)
246
-
},
247
-
[setIsModalActive, setActiveModals],
248
-
)
242
+
const openModal = useNonReactiveCallback((modal: Modal) => {
243
+
setActiveModals(modals => [...modals, modal])
244
+
})
249
245
250
-
const closeModal = React.useCallback(() => {
251
-
let totalActiveModals = 0
252
-
let wasActive = isModalActive
253
-
setActiveModals(activeModals => {
254
-
activeModals = activeModals.slice(0, -1)
255
-
totalActiveModals = activeModals.length
256
-
return activeModals
246
+
const closeModal = useNonReactiveCallback(() => {
247
+
let wasActive = activeModals.length > 0
248
+
setActiveModals(modals => {
249
+
return modals.slice(0, -1)
257
250
})
258
-
setIsModalActive(totalActiveModals > 0)
259
251
return wasActive
260
-
}, [setIsModalActive, setActiveModals, isModalActive])
252
+
})
261
253
262
-
const closeAllModals = React.useCallback(() => {
254
+
const closeAllModals = useNonReactiveCallback(() => {
263
255
setActiveModals([])
264
-
setIsModalActive(false)
265
-
}, [setActiveModals, setIsModalActive])
256
+
})
266
257
267
258
unstable__openModal = openModal
268
259
unstable__closeModal = closeModal
269
260
270
261
const state = React.useMemo(
271
262
() => ({
272
-
isModalActive,
263
+
isModalActive: activeModals.length > 0,
273
264
activeModals,
274
265
}),
275
-
[isModalActive, activeModals],
266
+
[activeModals],
276
267
)
277
268
278
269
const methods = React.useMemo(
+15
-9
src/state/shell/composer.tsx
+15
-9
src/state/shell/composer.tsx
···
1
1
import React from 'react'
2
2
import {AppBskyEmbedRecord} from '@atproto/api'
3
+
import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback'
3
4
4
5
export interface ComposerOptsPostRef {
5
6
uri: string
···
47
48
48
49
export function Provider({children}: React.PropsWithChildren<{}>) {
49
50
const [state, setState] = React.useState<StateContext>()
51
+
52
+
const openComposer = useNonReactiveCallback((opts: ComposerOpts) => {
53
+
setState(opts)
54
+
})
55
+
56
+
const closeComposer = useNonReactiveCallback(() => {
57
+
let wasOpen = !!state
58
+
setState(undefined)
59
+
return wasOpen
60
+
})
61
+
50
62
const api = React.useMemo(
51
63
() => ({
52
-
openComposer(opts: ComposerOpts) {
53
-
setState(opts)
54
-
},
55
-
closeComposer() {
56
-
let wasOpen = !!state
57
-
setState(undefined)
58
-
return wasOpen
59
-
},
64
+
openComposer,
65
+
closeComposer,
60
66
}),
61
-
[setState, state],
67
+
[openComposer, closeComposer],
62
68
)
63
69
64
70
return (