ImageLoader memory leak

[retyui]

Is there an existing issue for this?

• I have searched the existing issues

Describe the issue

Open Chrome devtools, go to the Memory tab, take a heap snapshot (Detached elements)
you should see a lot of img instances that are not garbage collected.

Expected behavior

zero Detached img

Steps to reproduce

1. create app
2. render 10 img
3. unmount them
4. take a heap snapshot (Detached elements)

Test case

https://snack.expo.dev/@retyui/imageloader-memory-leak

Additional comments

No response

[retyui]

Here is the patch that I use

diff --git a/node_modules/react-native-web/dist/modules/ImageLoader/index.js b/node_modules/react-native-web/dist/modules/ImageLoader/index.js
index 008d0d6..d76d643 100644
--- a/node_modules/react-native-web/dist/modules/ImageLoader/index.js
+++ b/node_modules/react-native-web/dist/modules/ImageLoader/index.js
@@ -119,12 +119,19 @@ var ImageLoader = {
   },
   load: function load(uri, onLoad, onError) {
     id += 1;
+    var reqId = "" + id;
     var image = new window.Image();
-    image.onerror = onError;
+    image.onerror = function (e) {
+      ImageLoader.abort(reqId); // Fix memory leak by removing from requests on error
+      if (typeof onError === 'function') {
+        return onError(e);
+      }
+    };
 
     image.onload = function (e) {
       // avoid blocking the main thread
       var onDecode = function onDecode() {
+        ImageLoader.abort(reqId); // Fix memory leak by removing from requests on load
         return onLoad({
           nativeEvent: e
         });
@@ -141,7 +148,7 @@ var ImageLoader = {
     };
 
     image.src = uri;
-    requests["" + id] = image;
+    requests[reqId] = image;
     return id;
   },
   prefetch: function prefetch(uri) {