only update shadows when screen is focused

src/state/cache/post-shadow.ts

@@ -1,9 +1,10 @@
-import {useEffect, useMemo, useState} from 'react'
+import {useCallback, useEffect, useMemo, useRef, useState} from 'react'
 import {
   AppBskyEmbedRecord,
   AppBskyEmbedRecordWithMedia,
   type AppBskyFeedDefs,
 } from '@atproto/api'
+import {useFocusEffect} from '@react-navigation/native'
 import {type QueryClient} from '@tanstack/react-query'
 import EventEmitter from 'eventemitter3'
 
@@ -44,15 +45,37 @@ export function usePostShadow(
     setShadow(shadows.get(post))
   }
 
+  const isFocusedRef = useRef(true)
+  const hasUpdatedWhileUnfocused = useRef(false)
+  useFocusEffect(
+    useCallback(() => {
+      isFocusedRef.current = true
+      if (hasUpdatedWhileUnfocused.current) {
+        console.log('catching up')
+        setShadow(shadows.get(post))
+        hasUpdatedWhileUnfocused.current = false
+      }
+      return () => {
+        isFocusedRef.current = false
+      }
+    }, [post]),
+  )
+
   useEffect(() => {
     function onUpdate() {
-      setShadow(shadows.get(post))
+      if (isFocusedRef.current) {
+        console.log('updating post', post.uri)
+        setShadow(shadows.get(post))
+      } else {
+        console.log('post changed while unfocused', post.uri)
+        hasUpdatedWhileUnfocused.current = true
+      }
     }
     emitter.addListener(post.uri, onUpdate)
     return () => {
       emitter.removeListener(post.uri, onUpdate)
     }
-  }, [post, setShadow])
+  }, [post])
 
   return useMemo(() => {
     if (shadow) {

src/state/cache/profile-shadow.ts

@@ -1,5 +1,6 @@
-import {useEffect, useMemo, useState} from 'react'
+import {useCallback, useEffect, useMemo, useRef, useState} from 'react'
 import {type AppBskyActorDefs, type AppBskyNotificationDefs} from '@atproto/api'
+import {useFocusEffect} from '@react-navigation/native'
 import {type QueryClient} from '@tanstack/react-query'
 import EventEmitter from 'eventemitter3'
 
@@ -53,9 +54,31 @@ export function useProfileShadow<
     setShadow(shadows.get(profile))
   }
 
+  const isFocusedRef = useRef(true)
+  const hasUpdatedWhileUnfocused = useRef(false)
+  useFocusEffect(
+    useCallback(() => {
+      isFocusedRef.current = true
+      if (hasUpdatedWhileUnfocused.current) {
+        console.log('catching up')
+        setShadow(shadows.get(profile))
+        hasUpdatedWhileUnfocused.current = false
+      }
+      return () => {
+        isFocusedRef.current = false
+      }
+    }, [profile]),
+  )
+
   useEffect(() => {
     function onUpdate() {
-      setShadow(shadows.get(profile))
+      if (isFocusedRef.current) {
+        console.log('updating profile', profile.did)
+        setShadow(shadows.get(profile))
+      } else {
+        console.log('profile updated while unfocused', profile.did)
+        hasUpdatedWhileUnfocused.current = true
+      }
     }
     emitter.addListener(profile.did, onUpdate)
     return () => {