From ef5f81897807eb71bb1d43e2b654bcc6064cf134 Mon Sep 17 00:00:00 2001
From: Neil <4138956+nwparker@users.noreply.github.com>
Date: Sun, 31 May 2026 09:09:45 -0700
Subject: [PATCH] perf: move troubleshoot cleanup to root ref

---
 mobile/app/troubleshoot.tsx | 22 ++++++++++++++--------
 1 file changed, 14 insertions(+), 8 deletions(-)

diff --git a/mobile/app/troubleshoot.tsx b/mobile/app/troubleshoot.tsx
index 56c2dcc5c..98a6aeceb 100644
--- a/mobile/app/troubleshoot.tsx
+++ b/mobile/app/troubleshoot.tsx
@@ -1,4 +1,4 @@
-import { useState, useCallback, useEffect, useRef } from 'react'
+import { useState, useCallback, useRef } from 'react'
 import {
   View,
   Text,
@@ -120,13 +120,16 @@ export default function TroubleshootScreen() {
   const diagnosticRunRef = useRef(0)
   const activeInternetCheckRef = useRef<DiagnosticFetchTimeout | null>(null)
 
-  useEffect(() => {
-    return () => {
-      abortRef.current = true
-      diagnosticRunRef.current += 1
-      activeInternetCheckRef.current?.dispose()
-      activeInternetCheckRef.current = null
+  const setTroubleshootRootRef = useCallback((node: View | null): void => {
+    if (node !== null) {
+      return
     }
+    // Why: diagnostics can outlive the screen; cancel the active run when the
+    // route detaches without a passive cleanup-only Effect.
+    abortRef.current = true
+    diagnosticRunRef.current += 1
+    activeInternetCheckRef.current?.dispose()
+    activeInternetCheckRef.current = null
   }, [])
 
   const toggleSection = useCallback((id: string) => {
@@ -216,7 +219,10 @@ export default function TroubleshootScreen() {
   }, [])
 
   return (
-    <View style={[styles.container, { paddingTop: insets.top + spacing.sm }]}>
+    <View
+      ref={setTroubleshootRootRef}
+      style={[styles.container, { paddingTop: insets.top + spacing.sm }]}
+    >
       <View style={styles.topRow}>
         <Pressable style={styles.backButton} onPress={() => router.back()}>
           <ChevronLeft size={22} color={colors.textSecondary} />