diff --git a/examples/sample/App.js b/examples/sample/App.js index 8bd3e0b..faffba9 100644 --- a/examples/sample/App.js +++ b/examples/sample/App.js @@ -1 +1 @@ -export { default } from './src/Moti.Skeleton' +export { default } from './src/Perf.List' diff --git a/examples/sample/src/Perf.List.tsx b/examples/sample/src/Perf.List.tsx new file mode 100644 index 0000000..f32e06b --- /dev/null +++ b/examples/sample/src/Perf.List.tsx @@ -0,0 +1,115 @@ +import { useMotify } from 'moti' +import { useEffect, useReducer, useState } from 'react' +import { Button, View, ViewStyle } from 'react-native' +import Animated, { useAnimatedStyle } from 'react-native-reanimated' + +global.shouldDebugMoti = false + +const modes = ['Animated', 'Moti'] as const + +let logs: Record = {} + +const list = new Array(1).fill(null).map((_, i) => i) + +export default function List() { + const [mode, setMode] = useState<(typeof modes)[number]>(modes[0]) + const [, render] = useReducer((s) => s + 1, 0) + + let renderStartAt = Date.now() + + useEffect(() => { + const interval = setInterval(() => { + render() + + const maxRendersPerMode = 4 + + if (logs[mode]?.length === maxRendersPerMode) { + // remove biggest and smallest values + clearInterval(interval) + const nextMode = modes[modes.indexOf(mode) + 1] + + if (nextMode) { + setMode(nextMode) + } else { + console.log(logs) + + let means = {} + let medians = {} + + for (let key in logs) { + means[key] = logs[key].reduce((a, b) => a + b, 0) / logs[key].length + } + + for (let key in logs) { + const list = logs[key].slice().sort() + medians[key] = list[list.length / 2] ?? list[(list.length - 1) / 2] + } + + console.log('Averages: ', JSON.stringify(means, null, 2)) + + console.log('Medians: ', JSON.stringify(medians, null, 2)) + + logs = {} + } + } + }, 600) + + return () => { + clearInterval(interval) + } + }, [mode]) + + useEffect( + function measurePerf() { + let renderEndAt = Date.now() + + const duration = renderEndAt - renderStartAt + + logs[mode] = logs[mode] || [] + logs[mode].push(duration) + }, + [mode, renderStartAt] + ) + + return ( + + {modes.map((m) => ( +