fix(🐛): Fix serious memory error with data loading hooks (useImage, useFont) (#2866)

Hooks like useImage wrong manually dispose the data when unmounting even thought the reference might be still used somewhere else. In the case of the Skia reconciler, the image is disposed even before any kind of unmounting is signaled to the reconciler.

Author: wcandillon

Diff for: apps/paper/ios/Podfile.lock

@@ -1694,8 +1694,6 @@ PODS:
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
     - Yoga
-  - RNSVG (15.9.0):
-    - React-Core
   - SocketRocket (0.7.0)
   - Yoga (0.0.0)
 
@@ -1770,7 +1768,6 @@ DEPENDENCIES:
   - RNGestureHandler (from `../../../node_modules/react-native-gesture-handler`)
   - RNReanimated (from `../../../node_modules/react-native-reanimated`)
   - RNScreens (from `../../../node_modules/react-native-screens`)
-  - RNSVG (from `../node_modules/react-native-svg`)
   - Yoga (from `../../../node_modules/react-native/ReactCommon/yoga`)
 
 SPEC REPOS:
@@ -1915,8 +1912,6 @@ EXTERNAL SOURCES:
     :path: "../../../node_modules/react-native-reanimated"
   RNScreens:
     :path: "../../../node_modules/react-native-screens"
-  RNSVG:
-    :path: "../node_modules/react-native-svg"
   Yoga:
     :path: "../../../node_modules/react-native/ReactCommon/yoga"
 
@@ -1989,9 +1984,8 @@ SPEC CHECKSUMS:
   RNGestureHandler: 939f21fabf5d45a725c0bf175eb819dd25cf2e70
   RNReanimated: 9d20a811e6987cba268ef4f56242dfabd40e85c1
   RNScreens: b03d696c70cc5235ce4587fcc27ae1a93a48f98c
-  RNSVG: 3d2bdcaef51c8071880a9c0072fe324f4423a3ba
   SocketRocket: abac6f5de4d4d62d24e11868d7a2f427e0ef940d
-  Yoga: a1d7895431387402a674fd0d1c04ec85e87909b8
+  Yoga: 2a45d7e59592db061217551fd3bbe2dd993817ae
 
 PODFILE CHECKSUM: debc09f5cfcbea21f946ca0be3faa5351e907125
 

Diff for: packages/skia/src/external/reanimated/useAnimatedImageValue.ts

@@ -1,4 +1,3 @@
-import { useEffect } from "react";
 import type { FrameInfo, SharedValue } from "react-native-reanimated";
 
 import { useAnimatedImage } from "../../skia/core/AnimatedImage";
@@ -16,14 +15,10 @@ export const useAnimatedImageValue = (
   const isPaused = paused ?? defaultPaused;
   const currentFrame = Rea.useSharedValue<null | SkImage>(null);
   const lastTimestamp = Rea.useSharedValue(-1);
-  const animatedImage = useAnimatedImage(
-    source,
-    (err) => {
-      console.error(err);
-      throw new Error(`Could not load animated image - got '${err.message}'`);
-    },
-    false
-  );
+  const animatedImage = useAnimatedImage(source, (err) => {
+    console.error(err);
+    throw new Error(`Could not load animated image - got '${err.message}'`);
+  });
   const frameDuration =
     animatedImage?.currentFrameDuration() || DEFAULT_FRAME_DURATION;
 
@@ -53,11 +48,5 @@ export const useAnimatedImageValue = (
     // Update the last timestamp
     lastTimestamp.value = timestamp;
   });
-  useEffect(() => {
-    return () => {
-      animatedImage?.dispose();
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
   return currentFrame;
 };

Diff for: packages/skia/src/skia/core/AnimatedImage.ts

@@ -12,6 +12,5 @@ const animatedImgFactory = Skia.AnimatedImage.MakeAnimatedImageFromEncoded.bind(
  * */
 export const useAnimatedImage = (
   source: DataSourceParam,
-  onError?: (err: Error) => void,
-  managed = true
-) => useRawData(source, animatedImgFactory, onError, managed);
+  onError?: (err: Error) => void
+) => useRawData(source, animatedImgFactory, onError);

Diff for: packages/skia/src/skia/core/Data.ts

@@ -40,8 +40,7 @@ export const loadData = <T>(
 
 const useLoading = <T extends SkJSIInstance<string>>(
   source: DataSourceParam,
-  loader: () => Promise<T | null>,
-  manage = true
+  loader: () => Promise<T | null>
 ) => {
   const mounted = useRef(false);
   const [data, setData] = useState<T | null>(null);
@@ -55,9 +54,6 @@ const useLoading = <T extends SkJSIInstance<string>>(
       }
     });
     return () => {
-      if (manage) {
-        dataRef.current?.dispose();
-      }
       mounted.current = false;
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -84,7 +80,6 @@ export const useCollectionLoading = <T extends SkJSIInstance<string>>(
     });
 
     return () => {
-      dataRef.current?.forEach((instance) => instance?.dispose());
       mounted.current = false;
     };
 
@@ -97,9 +92,8 @@ export const useCollectionLoading = <T extends SkJSIInstance<string>>(
 export const useRawData = <T extends SkJSIInstance<string>>(
   source: DataSourceParam,
   factory: (data: SkData) => T | null,
-  onError?: (err: Error) => void,
-  manage = true
-) => useLoading(source, () => loadData<T>(source, factory, onError), manage);
+  onError?: (err: Error) => void
+) => useLoading(source, () => loadData<T>(source, factory, onError));
 
 const identity = (data: SkData) => data;