fix: prevent infinite re-renders with unstable useRiveFile input

Use stable inputKey derived from URI string instead of object reference as effect dependency.

Author: mfazekas

src/hooks/__tests__/useRiveFile.test.ts

@@ -1,4 +1,4 @@
-import { renderHook, waitFor } from '@testing-library/react-native';
+import { renderHook, waitFor, act } from '@testing-library/react-native';
 import { useRiveFile } from '../useRiveFile';
 import type { RiveFile } from '../../specs/RiveFile.nitro';
 
@@ -8,6 +8,48 @@ jest.mock('react-native/Libraries/Image/Image', () => ({
   })),
 }));
 
+describe('useRiveFile - input stability', () => {
+  const mockRiveFile: RiveFile = {
+    dispose: jest.fn(),
+    updateReferencedAssets: jest.fn(),
+    viewModelCount: 0,
+    viewModelByIndex: jest.fn(),
+    viewModelByName: jest.fn(),
+    defaultArtboardViewModel: jest.fn(),
+  } as any;
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    (global as any).mockRiveFileFactory.fromSource.mockResolvedValue(
+      mockRiveFile
+    );
+  });
+
+  it('should not reload file when input object reference changes but uri is the same', async () => {
+    const { result, rerender } = renderHook(
+      (props: { input: { uri: string } }) => useRiveFile(props.input),
+      { initialProps: { input: { uri: 'https://example.com/animation.riv' } } }
+    );
+
+    await waitFor(() => {
+      expect((result.current as any).isLoading).toBe(false);
+    });
+
+    const callCountBefore = (global as any).mockRiveFileFactory.fromSource.mock
+      .calls.length;
+
+    await act(async () => {
+      rerender({ input: { uri: 'https://example.com/animation.riv' } });
+      // Give async effect time to run
+      await new Promise((resolve) => setTimeout(resolve, 50));
+    });
+
+    const callCountAfter = (global as any).mockRiveFileFactory.fromSource.mock
+      .calls.length;
+    expect(callCountAfter).toBe(callCountBefore);
+  });
+});
+
 describe('useRiveFile - updateReferencedAssets', () => {
   const mockRiveFile: RiveFile = {
     dispose: jest.fn(),

src/hooks/useRiveFile.ts

@@ -16,6 +16,12 @@ import type {
 export type { ReferencedAssets, ResolvedReferencedAssets };
 export type RiveFileInput = number | { uri: string } | string | ArrayBuffer;
 
+function isUriInput(
+  input: RiveFileInput | undefined
+): input is { uri: string } {
+  return input != null && typeof input === 'object' && 'uri' in input;
+}
+
 export type UseRiveFileOptions = {
   referencedAssets?: ReferencedAssets;
 };
@@ -100,6 +106,7 @@ export function useRiveFile(
     [options.referencedAssets]
   );
   const initialReferencedAssets = useRef(referencedAssets);
+  const inputKey = isUriInput(input) ? input.uri : input;
 
   useEffect(() => {
     let currentFile: RiveFile | null = null;
@@ -164,7 +171,8 @@ export function useRiveFile(
         callDispose(currentFile);
       }
     };
-  }, [input]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- inputKey is derived from input, using input directly would cause infinite loops with inline objects
+  }, [inputKey]);
 
   const { riveFile } = result;
   useEffect(() => {