[change] refactor Image useSource hook

Author: kidroca

packages/react-native-web/src/exports/Image/__tests__/__snapshots__/index-test.js.snap

@@ -329,14 +329,14 @@ exports[`components/Image prop "style" removes other unsupported View styles 1`]
 >
   <div
     class="css-view-175oi2r r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw r-backgroundSize-4gszlv"
-    style="filter: url(#tint-71);"
+    style="filter: url(#tint-72);"
   />
   <svg
     style="position: absolute; height: 0px; visibility: hidden; width: 0px;"
   >
     <defs>
       <filter
-        id="tint-71"
+        id="tint-72"
       >
         <feflood
           flood-color="blue"
@@ -378,7 +378,7 @@ exports[`components/Image prop "style" supports "tintcolor" property (convert to
 >
   <div
     class="css-view-175oi2r r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw r-backgroundSize-4gszlv"
-    style="background-image: url(https://google.com/favicon.ico); filter: url(#tint-70);"
+    style="background-image: url(https://google.com/favicon.ico); filter: url(#tint-71);"
   />
   <img
     alt=""
@@ -391,7 +391,7 @@ exports[`components/Image prop "style" supports "tintcolor" property (convert to
   >
     <defs>
       <filter
-        id="tint-70"
+        id="tint-71"
       >
         <feflood
           flood-color="red"

packages/react-native-web/src/exports/Image/index.js

@@ -8,6 +8,7 @@
  * @flow
  */
 
+import type { ImageResult } from '../../modules/ImageLoader';
 import type { ImageProps, Source, ImageLoadingProps } from './types';
 
 import * as React from 'react';
@@ -108,6 +109,7 @@ function resolveAssetDimensions(source) {
   }
 }
 
+// Todo: move this to ImageLoader, and handle URI create by URL.createObjectURL
 function resolveAssetUri(source): ?string {
   let uri = null;
   if (typeof source === 'number') {
@@ -310,76 +312,84 @@ ImageWithStatics.queryCache = function (uris) {
 const useSource = (
   { onLoad, onLoadStart, onLoadEnd, onError }: ImageLoadingProps,
   source: ?Source
-): { state: string, loadedUri: string } => {
-  const lastLoadedSource = React.useRef();
-  const [loadedUri, setLoadedUri] = React.useState('');
+): { state: string, loadedUri: ?string } => {
+  const input = React.useRef({ uri: '' });
+  const [requestId, setRequestId] = React.useState(-1);
   const [state, setState] = React.useState(() => {
     const uri = resolveAssetUri(source);
-    if (uri != null) {
-      const isLoaded = ImageLoader.has(uri);
-      if (isLoaded) return LOADED;
-    }
-    return IDLE;
+
+    return {
+      // Use the resolved URI for cases where it was already loaded or preloaded
+      result: { uri },
+      status: ImageLoader.has(uri) ? LOADED : IDLE
+    };
   });
 
-  // This object would only change when load related fields change
-  // We try to maintain strict object reference to prevent the effect hook running due to object change
-  const stableSource = React.useMemo(() => {
+  const handleLoad = React.useCallback(
+    (result: ImageResult) => {
+      if (onLoad) onLoad(result);
+      if (onLoadEnd) onLoadEnd();
+      setState({ status: LOADED, result });
+    },
+    [onLoad, onLoadEnd]
+  );
+
+  const handleError = React.useCallback(
+    (error) => {
+      if (onError) {
+        onError({
+          nativeEvent: {
+            error: `Failed to load resource ${input.current.uri} (404)`
+          }
+        });
+      }
+      if (onLoadEnd) onLoadEnd();
+
+      setState({ status: ERRORED, result: error });
+    },
+    [onError, onLoadEnd]
+  );
+
+  const startLoading = React.useCallback(
+    (nextInput) => {
+      if (onLoadStart) onLoadStart();
+      const requestId = ImageLoader.load(nextInput, handleLoad, handleError);
+      setRequestId(requestId);
+
+      setState((prevState) => ({ ...prevState, status: LOADING }));
+    },
+    [handleError, handleLoad, onLoadStart]
+  );
+
+  // Cleanup on umount or after starting a new request
+  React.useEffect(() => {
+    return () => {
+      if (requestId > 0) ImageLoader.release(requestId);
+    };
+  }, [requestId]);
+
+  // (Maybe) start loading on source changes
+  React.useEffect(() => {
     const uri = resolveAssetUri(source);
-    if (uri == null) {
-      lastLoadedSource.current = null;
-      return null;
-    }
+    if (uri == null) return;
 
     let headers;
     if (source && typeof source.headers === 'object') {
       headers = ((source.headers: any): { [key: string]: string });
     }
 
     const nextInput = { uri, headers };
-    if (
-      JSON.stringify(nextInput) !== JSON.stringify(lastLoadedSource.current)
-    ) {
-      lastLoadedSource.current = nextInput;
-    }
-
-    return lastLoadedSource.current;
-  }, [source]);
 
-  React.useEffect(() => {
-    if (stableSource == null) return;
-
-    setState(LOADING);
-    if (onLoadStart) onLoadStart();
-
-    const requestId = ImageLoader.load(
-      stableSource,
-      function load(result) {
-        setState(LOADED);
-        setLoadedUri(result.uri);
-        if (onLoad) onLoad(result);
-        if (onLoadEnd) onLoadEnd();
-      },
-      function error() {
-        setState(ERRORED);
-        if (onError) {
-          onError({
-            nativeEvent: {
-              error: `Failed to load resource ${stableSource.uri} (404)`
-            }
-          });
-        }
-        if (onLoadEnd) onLoadEnd();
-      }
-    );
+    // Do nothing if the input is virtually the same as the last loaded source
+    if (JSON.stringify(nextInput) === JSON.stringify(input.current)) return;
 
-    const effectCleanup = () => ImageLoader.release(requestId);
-    return effectCleanup;
-  }, [onError, onLoad, onLoadEnd, onLoadStart, stableSource]);
+    input.current = nextInput;
+    startLoading(nextInput);
+  }, [source, startLoading]);
 
   return {
-    state,
-    loadedUri
+    state: state.status,
+    loadedUri: state.result.uri
   };
 };