Skip to content

fix: prevent infinite re-renders with unstable useRiveFile input#100

Merged
mfazekas merged 4 commits intomainfrom
fix/99-max-update-depth
Jan 5, 2026
Merged

fix: prevent infinite re-renders with unstable useRiveFile input#100
mfazekas merged 4 commits intomainfrom
fix/99-max-update-depth

Conversation

@mfazekas
Copy link
Copy Markdown
Collaborator

@mfazekas mfazekas commented Jan 5, 2026

Summary

  • useRiveFile({uri: 'https://...'}) caused infinite re-renders as the input was not stable, causing useEffect to run, which caused setResult(..), which triggered another render...

Fixes #99

Note: Includes #101 (CI: ignore nitrogen copyright year changes)

Test plan

  • yarn test passes
  • yarn typecheck passes
  • yarn lint passes
Reproducer (not checked in)
'use no memo';

import { View, StyleSheet } from 'react-native';
import { RiveView, useRiveFile, Fit } from '@rive-app/react-native';
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>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  rive: {
    width: '100%',
    height: '100%',
  },
});

@mfazekas mfazekas force-pushed the fix/99-max-update-depth branch from 232abda to 89c925b Compare January 5, 2026 07:07
@mfazekas mfazekas marked this pull request as draft January 5, 2026 07:08
@mfazekas mfazekas force-pushed the fix/99-max-update-depth branch 5 times, most recently from fb7305b to 4cc174d Compare January 5, 2026 12:16
@mfazekas mfazekas marked this pull request as ready for review January 5, 2026 13:49
@mfazekas mfazekas requested a review from HayesGordon January 5, 2026 13:49
@mfazekas mfazekas enabled auto-merge (squash) January 5, 2026 13:50
@mfazekas mfazekas force-pushed the fix/99-max-update-depth branch from 120c0fc to f24d9ef Compare January 5, 2026 13:50
@mfazekas mfazekas merged commit c70e0d7 into main Jan 5, 2026
7 checks passed
@mfazekas mfazekas deleted the fix/99-max-update-depth branch January 5, 2026 13:51
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Error: Maximum update depth exceeded

2 participants