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

example/src/pages/Issue99Reproducer.tsx

@@ -0,0 +1,49 @@
+'use no memo';
+
+import { View, StyleSheet } from 'react-native';
+import { RiveView, useRiveFile, Fit } from '@rive-app/react-native';
+import { type Metadata } from '../helpers/metadata';
+import { useRef } from 'react';
+
+export default function Issue99Reproducer() {
+  const renderCount = useRef(0);
+  renderCount.current++;
+  console.log('Issue99Reproducer render count:', renderCount.current);
+
+  // Previously this would cause infinite re-renders because inline objects
+  // create new references each render. Fixed by using stable inputKey in useRiveFile.
+  const { riveFile } = useRiveFile({
+    uri: 'https://cdn.rive.app/animations/vehicles.riv',
+  });
+
+  return (
+    <View style={styles.container}>
+      {riveFile && (
+        <RiveView
+          autoPlay={true}
+          fit={Fit.Contain}
+          file={riveFile}
+          onError={(error) => console.error('Rive error:', error.message)}
+          style={styles.rive}
+        />
+      )}
+    </View>
+  );
+}
+
+Issue99Reproducer.metadata = {
+  name: 'Issue 99 Reproducer',
+  description: 'Reproducer for maximum update depth exceeded issue',
+} satisfies Metadata;
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  rive: {
+    width: '100%',
+    height: '100%',
+  },
+});

example/src/pages/index.ts

@@ -11,3 +11,4 @@ export { default as ManyViewModels } from './ManyViewModels';
 export { default as ResponsiveLayouts } from './ResponsiveLayouts';
 export { default as SharedValueListenerExample } from './SharedValueListenerExample';
 export { default as MenuListExample } from './MenuListExample';
+export { default as Issue99Reproducer } from './Issue99Reproducer';

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(() => {