[change] rename ImageLoader.abort to .release

The method is mostly used as cleanup
(e.g. useEffect cleanup, or releasing resources when component unmounts)

Simplified the `useEffect` for loading images a bit

Author: kidroca

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

@@ -261,16 +261,12 @@ const Image: React.AbstractComponent<
 
   // Image loading
   React.useEffect(() => {
-    let requestId;
-
     const uri = resolveAssetUri(source);
     if (uri != null) {
       updateState(LOADING);
-      if (onLoadStart) {
-        onLoadStart();
-      }
+      if (onLoadStart) onLoadStart();
 
-      requestId = ImageLoader.load(
+      const requestId = ImageLoader.load(
         { uri, headers: source?.headers },
         function load(result) {
           updateState(LOADED);
@@ -296,13 +292,13 @@ const Image: React.AbstractComponent<
           }
         }
       );
-    }
 
-    function abortPendingRequest() {
-      if (requestId) ImageLoader.abort(requestId);
-    }
+      const effectCleanup = () => {
+        if (requestId) ImageLoader.release(requestId);
+      };
 
-    return abortPendingRequest;
+      return effectCleanup;
+    }
   }, [source, updateState, onError, onLoad, onLoadEnd, onLoadStart]);
 
   return (

packages/react-native-web/src/modules/ImageLoader/index.js

@@ -74,7 +74,7 @@ let id = 0;
 const requests = {};
 
 const ImageLoader = {
-  abort(requestId: number) {
+  release(requestId: number) {
     const request = requests[requestId];
     if (request) {
       const { image, cleanup } = request;
@@ -105,7 +105,7 @@ const ImageLoader = {
         }
       }
       if (complete) {
-        ImageLoader.abort(requestId);
+        ImageLoader.release(requestId);
         clearInterval(interval);
       }
     }
@@ -114,7 +114,7 @@ const ImageLoader = {
       if (typeof failure === 'function') {
         failure();
       }
-      ImageLoader.abort(requestId);
+      ImageLoader.release(requestId);
       clearInterval(interval);
     }
   },