rea-performance-1.tsx

import Animated, {
  useSharedValue,
  withTiming,
  useAnimatedStyle,
  runOnUI,
  makeMutable,
  runOnJS,
} from 'react-native-reanimated';
import { View, Button } from 'react-native';
import React from 'react';

function AnimatedStyleUpdateExample(): React.ReactElement {

  const testSharedValue = useSharedValue(0);
  const globalMeasurements = makeMutable<any>([]);

  return (
    <View
      style={{
        flex: 1,
        flexDirection: 'column',
      }}>
      <Button
        title="toggle"
        onPress={() => {
          function warmup(job: (i: number) => void, iterations: number) {
            'worklet'
            for (let i = 0; i < iterations; i++) {
              job(i);
            }
          }

          function testTime(
            name: string,
            measurementsCount: number,
            iterationsCount: number,
            job: (i: number) => void
          ) {
            'worklet'
            console.log('------------------------------------------------------');
            console.log(name);
            const measurements = [];
            warmup(job, measurementsCount);
            const a = performance.now();
            for (let j = 0; j < iterationsCount; j++) {
              const startTime = performance.now();
              for (let i = 0; i < measurementsCount; i++) {
                job(i);
              }
              const endTime = performance.now();
              const duration = endTime - startTime;
              measurements.push(duration);
              console.log(`measurement [${j}]`, duration);
            }
            let measurementsSum = 0;
            const count = measurements.length;
            console.log('measurements', count);
            for (let i = 0; i < count; i++) {
              measurementsSum += measurements[i];
            }
            const averageIterationTime = measurementsSum / count;
            console.log('average iteration time', averageIterationTime);
            const averageMeasurementTime = averageIterationTime / measurementsCount;
            console.log('average measurement time', averageMeasurementTime);
          }
          
          function testTimeJSWrite(
            name: string,
            measurementsCount: number,
            job: (i: number) => void
          ) {
            'worklet'
            console.log('------------------------------------------------------');
            console.log(name);
            warmup(job, measurementsCount);
            const startTime = performance.now();
            for (let i = 0; i < measurementsCount; i++) {
              job(i);
            }
            runOnUI(() => {
              'worklet'
              const endTime = performance.now();
              const duration = endTime - startTime;
              globalMeasurements.value.push(duration);
              console.log(`measurement`, duration);
            })();
            const test = () => {
              console.log(testSharedValue.value)
            }
            runOnUI(() => {
              'worklet'
              let measurementsSum = 0;
              for (let i = 0; i < globalMeasurements.value.length; i++) {
                measurementsSum += globalMeasurements.value[i];
              }
              const averageIterationTime = measurementsSum / globalMeasurements.value.length;
              console.log('average iteration time', averageIterationTime);
              const averageMeasurementTime = averageIterationTime / measurementsCount;
              console.log('average measurement time', averageMeasurementTime);
              runOnJS(test)();
            })(); 
          }

          const MEASUREMENTS_COUNT = 20000;
          const ITERATION = 10;
          
          // testTime(
          //   'JS, write + read',
          //   MEASUREMENTS_COUNT,
          //   ITERATION,
          //   (i: number) => {
          //     testSharedValue.value = i;
          //     testSharedValue.value;
          //   }
          // );
          // testTimeJSWrite(
          //   'JS + UI, write',
          //   MEASUREMENTS_COUNT,
          //   (i: number) => {
          //     testSharedValue.value = i;
          //   }
          // );
          // testTime(
          //   'JS, write',
          //   MEASUREMENTS_COUNT,
          //   ITERATION,
          //   (i: number) => {
          //     testSharedValue.value = i;
          //   }
          // );
          // testTime(
          //   'JS, read',
          //   MEASUREMENTS_COUNT,
          //   ITERATION,
          //   (i: number) => {
          //     testSharedValue.value;
          //   }
          // );

          // runOnUI(() => {
          //   'worklet';
          //   const MEASUREMENTS_COUNT = 200000;
          //   const ITERATION = 10;
          //   testTime(
          //     'UI, write + read',
          //     MEASUREMENTS_COUNT,
          //     ITERATION,
          //     (i: number) => {
          //       testSharedValue.value = i;
          //       testSharedValue.value;
          //     }
          //   );
          //   testTime(
          //     'UI, write',
          //     MEASUREMENTS_COUNT,
          //     ITERATION,
          //     (i: number) => {
          //       testSharedValue.value = i;
          //     }
          //   );
          //   testTime(
          //     'UI, read',
          //     MEASUREMENTS_COUNT,
          //     ITERATION,
          //     (i: number) => {
          //       testSharedValue.value;
          //     }
          //   );
          // })();

        }}
      />
    </View>
  );
}

export default AnimatedStyleUpdateExample;