[v3] Gesture memoization uses initial dependency values only #4027
Description
Description
I haven't given this a deep dive to figure out exactly why it happens. Gesture hooks do not re-memoize their callbacks when dependent variables change state. I haven't found a way to define a dependency array somewhere either.
In the below repro component you can observe that flipping the state of color does not reflect in the gesture's onActivate callback, even though it's calling an external useCallback function. It feels like it's cloning the function on initial render and never re-memoizing it?
When setting runOnJS to true, callbacks behave as expected.
Steps to reproduce
import { useCallback, useState } from 'react';
import { Button, Text, View } from 'react-native';
import { GestureDetector, GestureHandlerRootView, useTapGesture } from 'react-native-gesture-handler';
import { runOnJS } from 'react-native-worklets';
export const Repro = () => {
const [color, setColor] = useState('red');
//whether useCallback is used or not, the behavior remains the same
const echoColor = useCallback(() => {
console.log('USECALLBACK', color);
}, [color]);
const tapGesture = useTapGesture({
onActivate: () => {
console.log('GESTURE CALLBACK', color);
runOnJS(echoColor)();
},
runOnJS: false, //setting this to true resolves the issue
});
return (
<GestureHandlerRootView>
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Color State: {color}</Text>
<Button onPress={() => echoColor()} title='Echo Color (JS)' />
<GestureDetector gesture={tapGesture}>
<Text>Echo Color (RNGH)</Text>
</GestureDetector>
<Button onPress={() => setColor(color === 'red' ? 'blue' : 'red')} title='Flip Color (JS)' />
</View>
</GestureHandlerRootView>
);
};A link to a Gist, an Expo Snack or a link to a repository based on this template that reproduces the bug.
Gesture Handler version
3.0.0
React Native version
0.83.2
Platforms
iOS
JavaScript runtime
None
Workflow
None
Architecture
None
Build type
None
Device
None
Device model
No response
Acknowledgements
Yes