Update Benchmark Example App

Co-authored-by: Andrea Lin <[email protected]>

Author: mattiaferrari02

example/ios/Podfile.lock

@@ -1298,7 +1298,7 @@ PODS:
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
     - Yoga
-  - RNSodium (0.2.0):
+  - RNSodium (0.2.1):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -1593,10 +1593,10 @@ SPEC CHECKSUMS:
   React-utils: 4476b7fcbbd95cfd002f3e778616155241d86e31
   ReactCommon: ecad995f26e0d1e24061f60f4e5d74782f003f12
   RNScreens: d3d50aa84db4541eee00fbb1f32151030f56c510
-  RNSodium: 381683159bdd22fc7bc65b6e4e6a8950cbb27bc1
+  RNSodium: f047dde7855aa3314c68045d90469fb2b297b555
   RNVectorIcons: 46a635b764a63e9a4ffedae054bca3847e0c8934
   SocketRocket: abac6f5de4d4d62d24e11868d7a2f427e0ef940d
-  Yoga: ae3c32c514802d30f687a04a6a35b348506d411f
+  Yoga: 2f71ecf38d934aecb366e686278102a51679c308
 
 PODFILE CHECKSUM: 2b476e664f3e7c6b87013748402bfab7c78276e5
 

example/src/components/Benchmark.tsx

@@ -6,7 +6,7 @@ import { formatDuration } from '../utils/time'
 
 type Props = {
   title: string
-  benchmarkFn: () => void
+  benchmarkFn: () => number
   setResult: (result: number) => void
   result: number | undefined
 }
@@ -34,11 +34,8 @@ export const Benchmark: FunctionComponent<Props> = ({
     // workaround to show the loading state
     await sleep(100)
 
-    const start = performance.now()
-    benchmarkFn()
-    const end = performance.now()
-
-    setResult(end - start)
+    const res = benchmarkFn()
+    setResult(res)
 
     setIsLoading(false)
     setCurrentLoading(false)

example/src/components/Percentage.tsx

@@ -0,0 +1,27 @@
+import React, { useMemo, type FunctionComponent } from 'react'
+import { Text } from 'react-native-paper'
+
+type Props = {
+  jsiTime: number | undefined
+  b64Time: number | undefined
+}
+
+export const Percentage: FunctionComponent<Props> = ({ jsiTime, b64Time }) => {
+  const fasterPercentage = useMemo(() => {
+    if (typeof jsiTime === 'undefined' || typeof b64Time === 'undefined') {
+      return undefined
+    }
+
+    return ((b64Time - jsiTime) / b64Time) * 100
+  }, [jsiTime, b64Time])
+
+  return (
+    <Text
+      style={typeof fasterPercentage === "undefined" ? undefined : {
+        color: fasterPercentage > 0 ? 'green' : 'red',
+      }}
+    >
+      {fasterPercentage ? `${fasterPercentage.toFixed(2)}%` : 'N/A'}
+    </Text>
+  )
+}

example/src/screens/B64.tsx

@@ -1,47 +1,50 @@
 import React, { type FunctionComponent } from "react"
 import { View, ScrollView } from "react-native"
-import { measureB64, maxSize, mediumSize, smallSize } from "../utils/benchmarks"
+import { measureB64, maxSize, mediumSize, smallSize, largeSize } from "../utils/benchmarks"
 import { Benchmark } from "../components/Benchmark"
 import { styles } from "../styles/common"
 import useBenchmarks from "../stores/Benchmarks"
 
 export const B64: FunctionComponent = () => {
   const setSmallArrayB64Measurements = useBenchmarks.use.setSmallArrayB64Measurements()
   const setMediumArrayB64Measurements = useBenchmarks.use.setMediumArrayB64Measurements()
+  const setLargeArrayB64Measurements = useBenchmarks.use.setLargeArrayB64Measurements()
   const setMaxArrayB64Measurements = useBenchmarks.use.setMaxArrayB64Measurements()
 
   const smallArrayB64Measurements = useBenchmarks.use.smallArrayB64Measurements()
   const mediumArrayB64Measurements = useBenchmarks.use.mediumArrayB64Measurements()
+  const largeArrayB64Measurements = useBenchmarks.use.largeArrayB64Measurements()
   const maxArrayB64Measurements = useBenchmarks.use.maxArrayB64Measurements()
 
   return (
     <ScrollView>
       <View style={[styles.container, styles.benchmarkContainer]}>
         <Benchmark
-          benchmarkFn={() => {
-            measureB64(smallSize)
-          }}
+          benchmarkFn={() => measureB64(smallSize)}
           setResult={setSmallArrayB64Measurements}
           result={smallArrayB64Measurements}
-          title={`Small Array B64 ${smallSize} bytes`}
+          title={`10k loops on Small Array B64 ${smallSize} bytes`}
         />
 
         <Benchmark
-          benchmarkFn={() => {
-            measureB64(mediumSize)
-          }}
+          benchmarkFn={() => measureB64(mediumSize)}
           setResult={setMediumArrayB64Measurements}
           result={mediumArrayB64Measurements}
-          title={`Medium Array B64 ${mediumSize} bytes`}
+          title={`10k loops on Medium Array B64 ${mediumSize} bytes`}
         />
 
         <Benchmark
-          benchmarkFn={() => {
-            measureB64(maxSize)
-          }}
+          benchmarkFn={() => measureB64(largeSize)}
+          setResult={setLargeArrayB64Measurements}
+          result={largeArrayB64Measurements}
+          title={`10k loops on Large Array B64 ${mediumSize} bytes`}
+        />
+
+        <Benchmark
+          benchmarkFn={() => measureB64(maxSize)}
           setResult={setMaxArrayB64Measurements}
           result={maxArrayB64Measurements}
-          title={`Max Array B64 ${maxSize} bytes`}
+          title={`10k loops on Max Array B64 ${maxSize} bytes`}
         />
 
       </View>

example/src/screens/JSI.tsx

@@ -3,45 +3,49 @@ import { View, ScrollView, } from "react-native"
 import useBenchmarks from "../stores/Benchmarks"
 import { styles } from "../styles/common"
 import { Benchmark } from "../components/Benchmark"
-import { measure, smallSize, mediumSize, maxSize } from "../utils/benchmarks"
+import { measure, smallSize, mediumSize, maxSize, largeSize } from "../utils/benchmarks"
 
 export const JSI: FunctionComponent = () => {
   const setSmallArrayJsiMeasurements = useBenchmarks.use.setSmallArrayJsiMeasurements()
   const setMediumArrayJsiMeasurements = useBenchmarks.use.setMediumArrayJsiMeasurements()
+  const setLargeArrayJsiMeasurements = useBenchmarks.use.setLargeArrayJsiMeasurements()
   const setMaxArrayJsiMeasurements = useBenchmarks.use.setMaxArrayJsiMeasurements()
 
   const smallArrayJsiMeasurements = useBenchmarks.use.smallArrayJsiMeasurements()
   const mediumArrayJsiMeasurements = useBenchmarks.use.mediumArrayJsiMeasurements()
+  const largeArrayJsiMeasurements = useBenchmarks.use.largeArrayJsiMeasurements()
   const maxArrayJsiMeasurements = useBenchmarks.use.maxArrayJsiMeasurements()
 
+
   return (
     <ScrollView>
       <View style={[styles.container, styles.benchmarkContainer]}>
         <Benchmark
-          benchmarkFn={() => {
-            measure(smallSize)
-          }}
+          benchmarkFn={() => measure(smallSize)}
           setResult={setSmallArrayJsiMeasurements}
           result={smallArrayJsiMeasurements}
-          title={`Small Array JSI ${smallSize} bytes`}
+          title={`10k loops on Small Array JSI ${smallSize} bytes`}
         />
 
         <Benchmark
-          benchmarkFn={() => {
-            measure(mediumSize)
-          }}
+          benchmarkFn={() => measure(mediumSize)}
           setResult={setMediumArrayJsiMeasurements}
           result={mediumArrayJsiMeasurements}
-          title={`Medium Array JSI ${mediumSize} bytes`}
+          title={`10k loops on Medium Array JSI ${mediumSize} bytes`}
+        />
+
+        <Benchmark
+          benchmarkFn={() => measure(largeSize)}
+          setResult={setLargeArrayJsiMeasurements}
+          result={largeArrayJsiMeasurements}
+          title={`10k loops on Large Array JSI ${mediumSize} bytes`}
         />
 
         <Benchmark
-          benchmarkFn={() => {
-            measure(maxSize)
-          }}
+          benchmarkFn={() => measure(maxSize)}
           setResult={setMaxArrayJsiMeasurements}
           result={maxArrayJsiMeasurements}
-          title={`Max Array JSI ${maxSize} bytes`}
+          title={`10k loops on Max Array JSI ${maxSize} bytes`}
         />
 
       </View>