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

* Use non-reactive callbacks for some methods

* Remove unnecessary state

* Use non-reactive callbacks for modals

1 files changed, 15 insertions, 9 deletions

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 (