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

* Use non-reactive callbacks for some methods

* Remove unnecessary state

* Use non-reactive callbacks for modals

3 files changed, 34 insertions, 39 deletions

diff --git a/src/state/lightbox.tsx b/src/state/lightbox.tsx
index d5528ac28..e3bddaee0 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 fa86aaa31..84fea3bad 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<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(
diff --git a/src/state/shell/composer.tsx b/src/state/shell/composer.tsx
index 70d77a7e0..bdf5e4a7a 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<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 (