Optimize useAnimatedReaction

[j-piasecki]

Summary

Values returned by the prepare function inside useAnimatedReaction are assigned to the previous shared value. Even though it is only read from the UI thread, those values are cloned so that they can be read from the JS thread. This process turns out to be a tad problematic when dealing with large objects, as it can take a significant amount of time.

This PR sets the oneWayReadsOnly flag when creating previous to true, disabling the cloning process and reducing the performance impact of the hook.

Test plan

Here's a simple reproduction for this problem

import React from 'react';
import {SafeAreaView} from 'react-native';
import {
  Gesture,
  GestureDetector,
  GestureHandlerRootView,
} from 'react-native-gesture-handler';
import Animated, {
  useAnimatedReaction,
  useAnimatedStyle,
  useSharedValue,
} from 'react-native-reanimated';

const largeArray = new Array(1000).fill(0).map((_, i) => i);

function Bar(props: any) {
  const backgroundColor = useSharedValue('#ff0000ff');

  useAnimatedReaction(
    () => {
      return [props.isScrolling.value, largeArray];
    },
    ([isScrolling]) => {
      if (isScrolling) {
        backgroundColor.value = '#00ff00ff';
      } else {
        backgroundColor.value = '#ff0000ff';
      }
    },
  );

  const style = useAnimatedStyle(() => {
    return {
      transform: [
        {translateX: props.scrollX.value},
        {translateY: props.scrollY.value},
      ],
      backgroundColor: backgroundColor.value,
    };
  });

  return (
    <Animated.View
      style={[
        {width: 300, height: 50, backgroundColor: 'red', marginTop: 8},
        style,
      ]}
    />
  );
}

const items = new Array(50).fill(0).map((_, i) => i);

export default function App() {
  const scrollX = useSharedValue(0);
  const scrollY = useSharedValue(0);
  const isScrolling = useSharedValue(false);

  const pan = Gesture.Pan()
    .onStart(() => {
      isScrolling.value = true;
    })
    .onEnd(() => {
      isScrolling.value = false;
    })
    .onChange(e => {
      scrollX.value += e.changeX;
      scrollY.value += e.changeY;
    })
    .runOnJS(true);

  return (
    <SafeAreaView style={{flex: 1}}>
      <GestureHandlerRootView style={{flex: 1}}>
        <GestureDetector gesture={pan}>
          <Animated.View style={{flex: 1}}>
            {items.map(item => (
              <Bar
                key={item}
                scrollX={scrollX}
                scrollY={scrollY}
                isScrolling={isScrolling}
              />
            ))}
          </Animated.View>
        </GestureDetector>
      </GestureHandlerRootView>
    </SafeAreaView>
  );
}

[tomekzaw]

🚀