From 1724d4c7660a4681735ef7d3cbcebd8db6327f18 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ignacy=20=C5=81=C4=85tka?= Date: Tue, 9 Jul 2024 12:25:44 +0200 Subject: [PATCH 1/5] major refactor of logic, remove accumulator and delta tracking --- .../src/component/PerformanceMonitor.tsx | 44 ++++--------------- 1 file changed, 9 insertions(+), 35 deletions(-) diff --git a/packages/react-native-reanimated/src/component/PerformanceMonitor.tsx b/packages/react-native-reanimated/src/component/PerformanceMonitor.tsx index 9e668039543..fe297d6de95 100644 --- a/packages/react-native-reanimated/src/component/PerformanceMonitor.tsx +++ b/packages/react-native-reanimated/src/component/PerformanceMonitor.tsx @@ -4,7 +4,6 @@ import React, { useEffect, useRef } from 'react'; import { TextInput, StyleSheet, View } from 'react-native'; import type { FrameInfo } from '../frameCallback'; -import type { SharedValue } from '../commonTypes'; import { useSharedValue, useAnimatedProps, useFrameCallback } from '../hook'; import { createAnimatedComponent } from '../createAnimatedComponent'; import { addWhitelistedNativeProps } from '../ConfigHelper'; @@ -46,7 +45,7 @@ function createCircularDoublesBuffer(size: number) { }; } -const DEFAULT_BUFFER_SIZE = 60; +const DEFAULT_BUFFER_SIZE = 20; addWhitelistedNativeProps({ text: true }); const AnimatedTextInput = createAnimatedComponent(TextInput); @@ -71,33 +70,18 @@ function getFps(renderTimeInMs: number): number { return 1000 / renderTimeInMs; } -function getTimeDelta( - timestamp: number, - previousTimestamp: number | null -): number { - 'worklet'; - return previousTimestamp !== null ? timestamp - previousTimestamp : 0; -} - function completeBufferRoutine( buffer: CircularBuffer, - timestamp: number, - previousTimestamp: number, - totalRenderTime: SharedValue + timestamp: number ): number { 'worklet'; timestamp = Math.round(timestamp); - previousTimestamp = Math.round(previousTimestamp) ?? timestamp; - const droppedTimestamp = buffer.push(timestamp); - const nextToDrop = buffer.back()!; + const droppedTimestamp = buffer.push(timestamp) ?? timestamp; - const delta = getTimeDelta(timestamp, previousTimestamp); - const droppedDelta = getTimeDelta(nextToDrop, droppedTimestamp); + const measuredRangeDuration = timestamp - droppedTimestamp; - totalRenderTime.value += delta - droppedDelta; - - return getFps(totalRenderTime.value / buffer.count); + return getFps(measuredRangeDuration / buffer.count); } function JsPerformance() { @@ -110,20 +94,17 @@ function JsPerformance() { useEffect(() => { loopAnimationFrame((_, timestamp) => { timestamp = Math.round(timestamp); - const previousTimestamp = circularBuffer.current.front() ?? timestamp; const currentFps = completeBufferRoutine( circularBuffer.current, - timestamp, - previousTimestamp, - totalRenderTime + timestamp ); // JS fps have to be measured every 2nd frame, // thus 2x multiplication has to occur here jsFps.value = (currentFps * 2).toFixed(0); }); - }, []); + }, [jsFps, totalRenderTime]); const animatedProps = useAnimatedProps(() => { const text = 'JS: ' + jsFps.value ?? 'N/A'; @@ -143,7 +124,6 @@ function JsPerformance() { function UiPerformance() { const uiFps = useSharedValue(null); - const totalRenderTime = useSharedValue(0); const circularBuffer = useSharedValue(null); useFrameCallback(({ timestamp }: FrameInfo) => { @@ -152,14 +132,8 @@ function UiPerformance() { } timestamp = Math.round(timestamp); - const previousTimestamp = circularBuffer.value.front() ?? timestamp; - - const currentFps = completeBufferRoutine( - circularBuffer.value, - timestamp, - previousTimestamp, - totalRenderTime - ); + + const currentFps = completeBufferRoutine(circularBuffer.value, timestamp); uiFps.value = currentFps.toFixed(0); }); From 346454effe2dfebd16b53b8e871b8e1dcb0081e7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ignacy=20=C5=81=C4=85tka?= Date: Tue, 9 Jul 2024 13:36:01 +0200 Subject: [PATCH 2/5] add UI improvements from the other PR --- .../src/component/PerformanceMonitor.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react-native-reanimated/src/component/PerformanceMonitor.tsx b/packages/react-native-reanimated/src/component/PerformanceMonitor.tsx index fe297d6de95..becd8511643 100644 --- a/packages/react-native-reanimated/src/component/PerformanceMonitor.tsx +++ b/packages/react-native-reanimated/src/component/PerformanceMonitor.tsx @@ -107,7 +107,7 @@ function JsPerformance() { }, [jsFps, totalRenderTime]); const animatedProps = useAnimatedProps(() => { - const text = 'JS: ' + jsFps.value ?? 'N/A'; + const text = 'JS: ' + (jsFps.value ?? 'N/A') + ' '; return { text, defaultValue: text }; }); @@ -139,7 +139,7 @@ function UiPerformance() { }); const animatedProps = useAnimatedProps(() => { - const text = 'UI: ' + uiFps.value ?? 'N/A'; + const text = 'UI: ' + (uiFps.value ?? 'N/A') + ' '; return { text, defaultValue: text }; }); From 5a68af6b9dc61268adaa9a61a1f6d87ef8a1f774 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ignacy=20=C5=81=C4=85tka?= Date: Tue, 9 Jul 2024 13:41:30 +0200 Subject: [PATCH 3/5] add docstrings and smoothing props --- .../src/component/PerformanceMonitor.tsx | 32 +++++++++++++++---- 1 file changed, 25 insertions(+), 7 deletions(-) diff --git a/packages/react-native-reanimated/src/component/PerformanceMonitor.tsx b/packages/react-native-reanimated/src/component/PerformanceMonitor.tsx index becd8511643..38e3d39172a 100644 --- a/packages/react-native-reanimated/src/component/PerformanceMonitor.tsx +++ b/packages/react-native-reanimated/src/component/PerformanceMonitor.tsx @@ -84,11 +84,11 @@ function completeBufferRoutine( return getFps(measuredRangeDuration / buffer.count); } -function JsPerformance() { +function JsPerformance({ smoothingFrames }: { smoothingFrames: number }) { const jsFps = useSharedValue(null); const totalRenderTime = useSharedValue(0); const circularBuffer = useRef( - createCircularDoublesBuffer(DEFAULT_BUFFER_SIZE) + createCircularDoublesBuffer(smoothingFrames) ); useEffect(() => { @@ -122,13 +122,13 @@ function JsPerformance() { ); } -function UiPerformance() { +function UiPerformance({ smoothingFrames }: { smoothingFrames: number }) { const uiFps = useSharedValue(null); const circularBuffer = useSharedValue(null); useFrameCallback(({ timestamp }: FrameInfo) => { if (circularBuffer.value === null) { - circularBuffer.value = createCircularDoublesBuffer(DEFAULT_BUFFER_SIZE); + circularBuffer.value = createCircularDoublesBuffer(smoothingFrames); } timestamp = Math.round(timestamp); @@ -154,11 +154,29 @@ function UiPerformance() { ); } -export function PerformanceMonitor() { +export type PerformanceMonitorProps = { + /** + * Sets amount of previous frames used for smoothing at highest expectedFps. + * + * Automatically scales down at lower frame rates. + * + * Affects jumpiness of the FPS measurements value. + */ + smoothingFrames?: number; +}; + +/** + * A component that lets you measure fps values on JS and UI threads on both the Paper and Fabric architectures. + * + * @param smoothingFrames - Determines amount of saved frames which will be used for fps value smoothing. + */ +export function PerformanceMonitor({ + smoothingFrames = DEFAULT_BUFFER_SIZE, +}: PerformanceMonitorProps) { return ( - - + + ); } From 0c9219e446f251c1f3d0f820077cc4a84b5b49c2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ignacy=20=C5=81=C4=85tka?= Date: Tue, 9 Jul 2024 13:49:54 +0200 Subject: [PATCH 4/5] export performance monitor props --- packages/react-native-reanimated/src/index.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/react-native-reanimated/src/index.ts b/packages/react-native-reanimated/src/index.ts index 03b21377235..aecff86599b 100644 --- a/packages/react-native-reanimated/src/index.ts +++ b/packages/react-native-reanimated/src/index.ts @@ -261,7 +261,10 @@ export { getAnimatedStyle, } from './jestUtils'; export { LayoutAnimationConfig } from './component/LayoutAnimationConfig'; -export { PerformanceMonitor } from './component/PerformanceMonitor'; +export { + PerformanceMonitor, + type PerformanceMonitorProps, +} from './component/PerformanceMonitor'; export type { Adaptable, AdaptTransforms, From aadb2c5792e3e7787276bda3d660dcc566013265 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ignacy=20=C5=81=C4=85tka?= Date: Mon, 15 Jul 2024 11:29:06 +0200 Subject: [PATCH 5/5] improve index exports --- packages/react-native-reanimated/src/index.ts | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/react-native-reanimated/src/index.ts b/packages/react-native-reanimated/src/index.ts index aecff86599b..92253dc2826 100644 --- a/packages/react-native-reanimated/src/index.ts +++ b/packages/react-native-reanimated/src/index.ts @@ -261,10 +261,8 @@ export { getAnimatedStyle, } from './jestUtils'; export { LayoutAnimationConfig } from './component/LayoutAnimationConfig'; -export { - PerformanceMonitor, - type PerformanceMonitorProps, -} from './component/PerformanceMonitor'; +export { PerformanceMonitor } from './component/PerformanceMonitor'; +export type { PerformanceMonitorProps } from './component/PerformanceMonitor'; export type { Adaptable, AdaptTransforms,