From 389a2deebc2dc41deb268f4b543709989d688d69 Mon Sep 17 00:00:00 2001
From: Ruslan Lesiutin <rdlesyutin@gmail.com>
Date: Wed, 9 Oct 2024 13:26:16 +0100
Subject: [PATCH] refactor[react-devtools/fiber/renderer]: optimize durations
 resolution (#31118)

Stacked on https://github.com/facebook/react/pull/31117.

No need for sending long float numbers and to have resolution less than
a microsecond, we end up formatting it on a Frontend side:

https://github.com/facebook/react/blob/6c7b41da3de12be2d95c60181b3fe896f824f13a/packages/react-devtools-shared/src/devtools/views/Profiler/utils.js#L359-L360
---
 .../src/backend/fiber/renderer.js             | 24 +++++++++++++++----
 .../src/backend/utils/index.js                |  9 +++++++
 2 files changed, 28 insertions(+), 5 deletions(-)

diff --git a/packages/react-devtools-shared/src/backend/fiber/renderer.js b/packages/react-devtools-shared/src/backend/fiber/renderer.js
index 9732bf105ca6c..8ce815c31f731 100644
--- a/packages/react-devtools-shared/src/backend/fiber/renderer.js
+++ b/packages/react-devtools-shared/src/backend/fiber/renderer.js
@@ -44,6 +44,7 @@ import {
 } from 'react-devtools-shared/src/utils';
 import {
   formatConsoleArgumentsToSingleString,
+  formatDurationToMicrosecondsGranularity,
   gt,
   gte,
   parseSourceFromComponentStack,
@@ -5074,8 +5075,14 @@ export function attach(
           const fiberSelfDurations: Array<[number, number]> = [];
           for (let i = 0; i < durations.length; i += 3) {
             const fiberID = durations[i];
-            fiberActualDurations.push([fiberID, durations[i + 1]]);
-            fiberSelfDurations.push([fiberID, durations[i + 2]]);
+            fiberActualDurations.push([
+              fiberID,
+              formatDurationToMicrosecondsGranularity(durations[i + 1]),
+            ]);
+            fiberSelfDurations.push([
+              fiberID,
+              formatDurationToMicrosecondsGranularity(durations[i + 2]),
+            ]);
           }
 
           commitData.push({
@@ -5083,11 +5090,18 @@ export function attach(
               changeDescriptions !== null
                 ? Array.from(changeDescriptions.entries())
                 : null,
-            duration: maxActualDuration,
-            effectDuration,
+            duration:
+              formatDurationToMicrosecondsGranularity(maxActualDuration),
+            effectDuration:
+              effectDuration !== null
+                ? formatDurationToMicrosecondsGranularity(effectDuration)
+                : null,
             fiberActualDurations,
             fiberSelfDurations,
-            passiveEffectDuration,
+            passiveEffectDuration:
+              passiveEffectDuration !== null
+                ? formatDurationToMicrosecondsGranularity(passiveEffectDuration)
+                : null,
             priorityLevel,
             timestamp: commitTime,
             updaters,
diff --git a/packages/react-devtools-shared/src/backend/utils/index.js b/packages/react-devtools-shared/src/backend/utils/index.js
index 1e7934af9835b..c07536e422608 100644
--- a/packages/react-devtools-shared/src/backend/utils/index.js
+++ b/packages/react-devtools-shared/src/backend/utils/index.js
@@ -331,3 +331,12 @@ export function parseSourceFromComponentStack(
 
   return parseSourceFromFirefoxStack(componentStack);
 }
+
+// 0.123456789 => 0.123
+// Expects high-resolution timestamp in milliseconds, like from performance.now()
+// Mainly used for optimizing the size of serialized profiling payload
+export function formatDurationToMicrosecondsGranularity(
+  duration: number,
+): number {
+  return Math.round(duration * 1000) / 1000;
+}