From 2759cfee9713f8eb8fd48ecadabb42b0038768ec Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Fri, 22 May 2026 01:56:50 -0700
Subject: [PATCH] Revert "fix NativeImage state causing crashes in table"

This reverts commit 4008c8dfdf755dfbcf57c391eee5ddea4bb0df85.
---
 src/shared/components/image/image.tsx         | 19 ++-----
 .../components/image/use-native-image.ts      | 56 +++----------------
 2 files changed, 15 insertions(+), 60 deletions(-)

diff --git a/src/shared/components/image/image.tsx b/src/shared/components/image/image.tsx
index ce5fca6f8..ce5c260e1 100644
--- a/src/shared/components/image/image.tsx
+++ b/src/shared/components/image/image.tsx
@@ -89,18 +89,11 @@ export function BaseImage({
     const effectiveImageRequest =
         isInSessionCache || !enableDebounce ? rawImageRequest : debouncedImageRequest;
 
-    const imageCacheKey = src ?? rawImageRequest?.cacheKey;
-    const trackLoadedInInstance = enableViewport;
-
     const [hasLoadedInInstance, setHasLoadedInInstance] = useState(false);
 
     useEffect(() => {
-        if (!trackLoadedInInstance) {
-            return;
-        }
-
-        setHasLoadedInInstance((current) => (current ? false : current));
-    }, [imageCacheKey, trackLoadedInInstance]);
+        setHasLoadedInInstance(false);
+    }, [effectiveImageRequest?.cacheKey]);
 
     const shouldLoadImage = Boolean(
         effectiveImageRequest &&
@@ -119,13 +112,13 @@ export function BaseImage({
     });
 
     useEffect(() => {
-        if (!trackLoadedInInstance || !nativeImage.isLoaded || !imageCacheKey) {
+        if (!nativeImage.isLoaded || !effectiveImageRequest?.cacheKey) {
             return;
         }
 
-        loadedImageCacheKeys.add(imageCacheKey);
-        setHasLoadedInInstance((current) => (current ? current : true));
-    }, [imageCacheKey, nativeImage.isLoaded, trackLoadedInInstance]);
+        loadedImageCacheKeys.add(effectiveImageRequest.cacheKey);
+        setHasLoadedInInstance(true);
+    }, [effectiveImageRequest?.cacheKey, nativeImage.isLoaded]);
 
     return (
         <ImageContainer
diff --git a/src/shared/components/image/use-native-image.ts b/src/shared/components/image/use-native-image.ts
index 8600ef8b3..6b1a5d171 100644
--- a/src/shared/components/image/use-native-image.ts
+++ b/src/shared/components/image/use-native-image.ts
@@ -26,11 +26,8 @@ export function useNativeImage({
     const loadedRequestSignatureRef = useRef<null | string>(null);
     const objectUrlRef = useRef<null | string>(null);
     const onFetchErrorRef = useRef(onFetchError);
-    const requestRef = useRef(request);
     const [state, setState] = useState<NativeImageState>({ status: 'idle' });
 
-    requestRef.current = request;
-
     const requestSignature = useMemo(() => {
         if (!request) {
             return null;
@@ -47,8 +44,6 @@ export function useNativeImage({
     onFetchErrorRef.current = onFetchError;
 
     useEffect(() => {
-        const request = requestRef.current;
-
         const abortCurrentRequest = () => {
             abortControllerRef.current?.abort();
             abortControllerRef.current = null;
@@ -67,61 +62,28 @@ export function useNativeImage({
         if (!request || !requestSignature) {
             abortCurrentRequest();
             revokeObjectUrl();
-            setState((currentState) => {
-                if (currentState.status === 'idle' && !currentState.displaySrc) {
-                    return currentState;
-                }
-
-                return { status: 'idle' };
-            });
+            setState({ status: 'idle' });
             return;
         }
 
         if (!enabled) {
             abortCurrentRequest();
-            setState((currentState) => {
-                if (currentState.displaySrc) {
-                    if (currentState.status === 'loaded') {
-                        return currentState;
-                    }
-
-                    return { ...currentState, status: 'loaded' };
-                }
-
-                if (currentState.status === 'idle' && !currentState.displaySrc) {
-                    return currentState;
-                }
-
-                return { status: 'idle' };
-            });
+            setState((currentState) =>
+                currentState.displaySrc
+                    ? { ...currentState, status: 'loaded' }
+                    : { status: 'idle' },
+            );
             return;
         }
 
         if (loadedRequestSignatureRef.current === requestSignature && objectUrlRef.current) {
-            const cachedObjectUrl = objectUrlRef.current;
-
-            setState((currentState) => {
-                if (
-                    currentState.status === 'loaded' &&
-                    currentState.displaySrc === cachedObjectUrl
-                ) {
-                    return currentState;
-                }
-
-                return { displaySrc: cachedObjectUrl, status: 'loaded' };
-            });
+            setState({ displaySrc: objectUrlRef.current, status: 'loaded' });
             return;
         }
 
         abortCurrentRequest();
         revokeObjectUrl();
-        setState((currentState) => {
-            if (currentState.status === 'loading' && !currentState.displaySrc) {
-                return currentState;
-            }
-
-            return { status: 'loading' };
-        });
+        setState({ status: 'loading' });
 
         const abortController = new AbortController();
         abortControllerRef.current = abortController;
@@ -176,7 +138,7 @@ export function useNativeImage({
                 abortControllerRef.current = null;
             }
         };
-    }, [enabled, fetchPriority, requestSignature]);
+    }, [enabled, fetchPriority, request, requestSignature]);
 
     useEffect(() => {
         return () => {