Revert "fix NativeImage state causing crashes in table"

This reverts commit 4008c8dfdf.

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) {
+        setHasLoadedInInstance(false);
-            return;
+    }, [effectiveImageRequest?.cacheKey]);
-        }
-
-        setHasLoadedInInstance((current) => (current ? false : current));
-    }, [imageCacheKey, trackLoadedInInstance]);
 
     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);
+        loadedImageCacheKeys.add(effectiveImageRequest.cacheKey);
-        setHasLoadedInInstance((current) => (current ? current : true));
+        setHasLoadedInInstance(true);
-    }, [imageCacheKey, nativeImage.isLoaded, trackLoadedInInstance]);
+    }, [effectiveImageRequest?.cacheKey, nativeImage.isLoaded]);
 
     return (
         <ImageContainer

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) => {
+            setState({ status: 'idle' });
-                if (currentState.status === 'idle' && !currentState.displaySrc) {
-                    return currentState;
-                }
-
-                return { status: 'idle' };
-            });
             return;
         }
 
         if (!enabled) {
             abortCurrentRequest();
-            setState((currentState) => {
+            setState((currentState) =>
-                if (currentState.displaySrc) {
+                currentState.displaySrc
-                    if (currentState.status === 'loaded') {
+                    ? { ...currentState, status: 'loaded' }
-                        return currentState;
+                    : { status: 'idle' },
-                    }
+            );
-
-                    return { ...currentState, status: 'loaded' };
-                }
-
-                if (currentState.status === 'idle' && !currentState.displaySrc) {
-                    return currentState;
-                }
-
-                return { status: 'idle' };
-            });
             return;
         }
 
         if (loadedRequestSignatureRef.current === requestSignature && objectUrlRef.current) {
-            const cachedObjectUrl = objectUrlRef.current;
+            setState({ displaySrc: objectUrlRef.current, status: 'loaded' });
-
-            setState((currentState) => {
-                if (
-                    currentState.status === 'loaded' &&
-                    currentState.displaySrc === cachedObjectUrl
-                ) {
-                    return currentState;
-                }
-
-                return { displaySrc: cachedObjectUrl, status: 'loaded' };
-            });
             return;
         }
 
         abortCurrentRequest();
         revokeObjectUrl();
-        setState((currentState) => {
+        setState({ status: 'loading' });
-            if (currentState.status === 'loading' && !currentState.displaySrc) {
-                return currentState;
-            }
-
-            return { 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 () => {