From 120b45251ee34c0df3e7b7e4e9ac0c194acb56d4 Mon Sep 17 00:00:00 2001
From: Christian Baroni <christianbaroni@me.com>
Date: Tue, 2 Apr 2024 12:28:52 -0400
Subject: [PATCH] Only hold the active tab ref in BrowserContext (#5579)

Co-authored-by: Christian Baroni <7061887+christianbaroni@users.noreply.github.com>
---
 src/components/DappBrowser/BrowserContext.tsx | 18 ++----------------
 src/components/DappBrowser/BrowserTab.tsx     | 10 +---------
 2 files changed, 3 insertions(+), 25 deletions(-)

diff --git a/src/components/DappBrowser/BrowserContext.tsx b/src/components/DappBrowser/BrowserContext.tsx
index bff1e67737a..73ed0be8068 100644
--- a/src/components/DappBrowser/BrowserContext.tsx
+++ b/src/components/DappBrowser/BrowserContext.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-empty-function */
-import React, { createContext, useCallback, useContext, useLayoutEffect, useRef, useState } from 'react';
+import React, { createContext, useCallback, useContext, useRef, useState } from 'react';
 import { TextInput } from 'react-native';
 import isEqual from 'react-fast-compare';
 import { MMKV, useMMKVObject } from 'react-native-mmkv';
@@ -55,7 +55,6 @@ interface BrowserContextType {
   tabViewVisible: SharedValue<boolean> | undefined;
   toggleTabViewWorklet: (activeIndex?: number) => void;
   updateActiveTabState: (newState: Partial<TabState>, tabId?: string) => void;
-  webViewRefs: React.MutableRefObject<(WebView | null)[]>;
 }
 
 export interface TabState {
@@ -121,7 +120,6 @@ const DEFAULT_BROWSER_CONTEXT: BrowserContextType = {
   updateActiveTabState: () => {
     return;
   },
-  webViewRefs: { current: [] },
 };
 
 const BrowserContext = createContext<BrowserContextType>(DEFAULT_BROWSER_CONTEXT);
@@ -155,7 +153,6 @@ export const BrowserContextProvider = ({ children }: { children: React.ReactNode
 
   const searchInputRef = useRef<TextInput>(null);
   const scrollViewRef = useAnimatedRef<Animated.ScrollView>();
-  const webViewRefs = useRef<WebView[]>([]);
   const activeTabRef = useRef<WebView | null>(null);
 
   const loadProgress = useSharedValue(0);
@@ -222,7 +219,6 @@ export const BrowserContextProvider = ({ children }: { children: React.ReactNode
           setActiveTabIndex(0);
           animatedActiveTabIndex.value = 0;
           setTabStates(EMPTY_TAB_STATE);
-          webViewRefs.current = [];
           newTab();
           return;
         } else if (isLastTab && tabIndex > 0) {
@@ -238,9 +234,8 @@ export const BrowserContextProvider = ({ children }: { children: React.ReactNode
       setTabStates(updatedTabs);
       setActiveTabIndex(newActiveTabIndex);
       animatedActiveTabIndex.value = newActiveTabIndex;
-      webViewRefs.current.splice(tabIndex, 1);
     },
-    [activeTabIndex, animatedActiveTabIndex, newTab, setTabStates, tabStates, webViewRefs]
+    [activeTabIndex, animatedActiveTabIndex, newTab, setTabStates, tabStates]
   );
 
   const goBack = useCallback(() => {
@@ -261,14 +256,6 @@ export const BrowserContextProvider = ({ children }: { children: React.ReactNode
     }
   }, [activeTabRef]);
 
-  // useLayoutEffect seems to more reliably assign the ref correctly
-  useLayoutEffect(() => {
-    if (activeTabRef.current !== webViewRefs.current?.[activeTabIndex]) {
-      activeTabRef.current = webViewRefs.current?.[activeTabIndex] || null;
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [activeTabIndex, webViewRefs]);
-
   return (
     <BrowserContext.Provider
       value={{
@@ -291,7 +278,6 @@ export const BrowserContextProvider = ({ children }: { children: React.ReactNode
         tabViewVisible,
         toggleTabViewWorklet,
         updateActiveTabState,
-        webViewRefs,
       }}
     >
       {children}
diff --git a/src/components/DappBrowser/BrowserTab.tsx b/src/components/DappBrowser/BrowserTab.tsx
index 8e1e4ad2812..ec2be197b08 100644
--- a/src/components/DappBrowser/BrowserTab.tsx
+++ b/src/components/DappBrowser/BrowserTab.tsx
@@ -193,7 +193,6 @@ export const BrowserTab = React.memo(function BrowserTab({ tabId, tabIndex, inje
     tabViewVisible,
     toggleTabViewWorklet,
     updateActiveTabState,
-    webViewRefs,
   } = useBrowserContext();
   const { isDarkMode } = useColorMode();
   const { width: deviceWidth } = useDimensions();
@@ -411,17 +410,10 @@ export const BrowserTab = React.memo(function BrowserTab({ tabId, tabIndex, inje
   // useLayoutEffect seems to more reliably assign the ref correctly
   useLayoutEffect(() => {
     if (webViewRef.current !== null && isActiveTab) {
-      webViewRefs.current[tabIndex] = webViewRef.current;
       activeTabRef.current = webViewRef.current;
     }
-
-    const currentWebviewRef = webViewRefs.current;
-
-    return () => {
-      currentWebviewRef[tabIndex] = null;
-    };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isActiveTab, isOnHomepage, tabId, tabIndex, webViewRefs]);
+  }, [isActiveTab, isOnHomepage, tabId]);
 
   const saveScreenshotToFileSystem = useCallback(
     async (tempUri: string, tabId: string, timestamp: number, url: string) => {