diff --git a/src/state/lightbox.tsx b/src/state/lightbox.tsx index d5528ac2..e3bddaee 100644 --- a/src/state/lightbox.tsx +++ b/src/state/lightbox.tsx @@ -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( () => ({ diff --git a/src/state/modals/index.tsx b/src/state/modals/index.tsx index fa86aaa3..84fea3ba 100644 --- a/src/state/modals/index.tsx +++ b/src/state/modals/index.tsx @@ -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([]) - 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( diff --git a/src/state/shell/composer.tsx b/src/state/shell/composer.tsx index 70d77a7e..bdf5e4a7 100644 --- a/src/state/shell/composer.tsx +++ b/src/state/shell/composer.tsx @@ -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({ export function Provider({children}: React.PropsWithChildren<{}>) { const [state, setState] = React.useState() + + 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 (