Use non-reactive callbacks for some methods (#1948)

* Use non-reactive callbacks for some methods

* Remove unnecessary state

* Use non-reactive callbacks for modals
zio/stable
dan 2023-11-17 06:18:37 +00:00 committed by GitHub
parent a10adf8908
commit a8aed2c38e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 34 additions and 39 deletions

View File

@ -1,5 +1,6 @@
import React from 'react'
import {AppBskyActorDefs} from '@atproto/api'
import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback'
interface Lightbox {
name: string
@ -42,18 +43,15 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
null,
)
const openLightbox = React.useCallback(
(lightbox: Lightbox) => {
setActiveLightbox(lightbox)
},
[setActiveLightbox],
)
const openLightbox = useNonReactiveCallback((lightbox: Lightbox) => {
setActiveLightbox(lightbox)
})
const closeLightbox = React.useCallback(() => {
const closeLightbox = useNonReactiveCallback(() => {
let wasActive = !!activeLightbox
setActiveLightbox(null)
return wasActive
}, [setActiveLightbox, activeLightbox])
})
const state = React.useMemo(
() => ({

View File

@ -5,6 +5,7 @@ import {Image as RNImage} from 'react-native-image-crop-picker'
import {ImageModel} from '#/state/models/media/image'
import {GalleryModel} from '#/state/models/media/gallery'
import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback'
export interface ConfirmModal {
name: 'confirm'
@ -236,43 +237,33 @@ export let unstable__closeModal: () => boolean = () => {
}
export function Provider({children}: React.PropsWithChildren<{}>) {
const [isModalActive, setIsModalActive] = React.useState(false)
const [activeModals, setActiveModals] = React.useState<Modal[]>([])
const openModal = React.useCallback(
(modal: Modal) => {
setActiveModals(activeModals => [...activeModals, modal])
setIsModalActive(true)
},
[setIsModalActive, setActiveModals],
)
const openModal = useNonReactiveCallback((modal: Modal) => {
setActiveModals(modals => [...modals, modal])
})
const closeModal = React.useCallback(() => {
let totalActiveModals = 0
let wasActive = isModalActive
setActiveModals(activeModals => {
activeModals = activeModals.slice(0, -1)
totalActiveModals = activeModals.length
return activeModals
const closeModal = useNonReactiveCallback(() => {
let wasActive = activeModals.length > 0
setActiveModals(modals => {
return modals.slice(0, -1)
})
setIsModalActive(totalActiveModals > 0)
return wasActive
}, [setIsModalActive, setActiveModals, isModalActive])
})
const closeAllModals = React.useCallback(() => {
const closeAllModals = useNonReactiveCallback(() => {
setActiveModals([])
setIsModalActive(false)
}, [setActiveModals, setIsModalActive])
})
unstable__openModal = openModal
unstable__closeModal = closeModal
const state = React.useMemo(
() => ({
isModalActive,
isModalActive: activeModals.length > 0,
activeModals,
}),
[isModalActive, activeModals],
[activeModals],
)
const methods = React.useMemo(

View File

@ -1,5 +1,6 @@
import React from 'react'
import {AppBskyEmbedRecord} from '@atproto/api'
import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback'
export interface ComposerOptsPostRef {
uri: string
@ -47,18 +48,23 @@ const controlsContext = React.createContext<ControlsContext>({
export function Provider({children}: React.PropsWithChildren<{}>) {
const [state, setState] = React.useState<StateContext>()
const openComposer = useNonReactiveCallback((opts: ComposerOpts) => {
setState(opts)
})
const closeComposer = useNonReactiveCallback(() => {
let wasOpen = !!state
setState(undefined)
return wasOpen
})
const api = React.useMemo(
() => ({
openComposer(opts: ComposerOpts) {
setState(opts)
},
closeComposer() {
let wasOpen = !!state
setState(undefined)
return wasOpen
},
openComposer,
closeComposer,
}),
[setState, state],
[openComposer, closeComposer],
)
return (