Skip to content

fix: stabilize property setter functions by using global options & fix ci#1

Merged
mfazekas merged 2 commits intomainfrom
fix/stable-rive-property-options
Oct 28, 2025
Merged

fix: stabilize property setter functions by using global options & fix ci#1
mfazekas merged 2 commits intomainfrom
fix/stable-rive-property-options

Conversation

@mfazekas
Copy link
Copy Markdown
Collaborator

@mfazekas mfazekas commented Oct 28, 2025

Summary

This PR fixes the issue where property setter functions from useRive* hooks were unstable, causing unnecessary re-renders.

Changes

  • Extract options objects to global constants in useRiveBoolean, useRiveNumber, useRiveString, and useRiveColor
  • Use useMemo in useRiveTrigger to recreate options only when onTrigger changes
  • Remove unnecessary useCallback imports where no longer needed
  • fixed GitHub actions (yarn nitrogen was missing from few places)

Problem

Property setter functions (setValue, setButtonText, etc.) were unstable because the options object passed to useRiveProperty was recreated on each render, even though useCallback was used for the getProperty function. This caused the useMemo and useEffect in useRiveProperty to re-run unnecessarily, resetting listeners and creating instability.

Solution

By extracting the options to global constants, we ensure stable object references across renders. For useRiveTrigger, which has a dynamic onTrigger parameter, we use useMemo to only recreate the options when onTrigger actually changes.

Test plan

To reproduce the issue: In example/src/pages/RiveDataBindingExample.tsx, apply this diff:

diff --git a/example/src/pages/RiveDataBindingExample.tsx b/example/src/pages/RiveDataBindingExample.tsx
index 76b2f60..039236c 100644
--- a/example/src/pages/RiveDataBindingExample.tsx
+++ b/example/src/pages/RiveDataBindingExample.tsx
@@ -1,4 +1,4 @@
-import { View, Text, StyleSheet, ActivityIndicator } from 'react-native';
+import { View, Text, StyleSheet, ActivityIndicator, Button } from 'react-native';
 import { useState, useEffect } from 'react';
 import {
   Fit,
@@ -152,6 +152,10 @@ export default function DataBindingExample() {
             hybridRef={setHybridRef}
           />
         )}
+        <Button
+          title="Change button"
+          onPress={() => setButtonText('New Button Text')}
+        />
       </View>
     </View>
   );

pressing the change button should change the button for good. Previously it was changed, but changed back immediately

🤖 Generated with Claude Code

Property setter functions (setValue, setButtonText, etc.) from
useRive* hooks were unstable because the options object was
recreated on each render, even though useCallback was used for
getProperty. This caused unnecessary re-renders and listener resets.

Extract options to global constants to ensure stable object
references across renders. For useRiveTrigger, use useMemo to
recreate options only when onTrigger changes.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
@mfazekas mfazekas force-pushed the fix/stable-rive-property-options branch 3 times, most recently from 45b6fbc to 78b07be Compare October 28, 2025 12:46
@mfazekas mfazekas force-pushed the fix/stable-rive-property-options branch from 78b07be to 2b7492b Compare October 28, 2025 12:55
@mfazekas mfazekas changed the title fix: stabilize property setter functions by using global options fix: stabilize property setter functions by using global options & fix ci Oct 28, 2025
@mfazekas mfazekas marked this pull request as ready for review October 28, 2025 13:19
@mfazekas mfazekas requested a review from HayesGordon October 28, 2025 13:21
- name: Install cocoapods
if: env.turbo_cache_hit != 1 && steps.cocoapods-cache.outputs.cache-hit != 'true'
run: |
yarn nitrogen
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can decide this later, but might prefer to commit the nitrogen generated code

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍 Yes let's do that, otherwise it's a pain with for example builder bob. Ideally we'd have a gh action that checks if the generated files are uptodate.

Copy link
Copy Markdown
Contributor

@HayesGordon HayesGordon left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM! Congrats on the first PR

@mfazekas mfazekas merged commit 16e2d77 into main Oct 28, 2025
5 checks passed
mfazekas added a commit that referenced this pull request Nov 17, 2025
…x ci (#1)

* fix: stabilize property setter functions by using global options

Property setter functions (setValue, setButtonText, etc.) from
useRive* hooks were unstable because the options object was
recreated on each render, even though useCallback was used for
getProperty. This caused unnecessary re-renders and listener resets.

Extract options to global constants to ensure stable object
references across renders. For useRiveTrigger, use useMemo to
recreate options only when onTrigger changes.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

* fix(chore): ci - fix

---------

Co-authored-by: Claude <noreply@anthropic.com>
@HayesGordon HayesGordon deleted the fix/stable-rive-property-options branch December 9, 2025 16:25
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.

2 participants