@samitouri / QOS-React / commits / 2805f0ed9e

Performance Tracks: log properties diff for renders in DEV if no console task available (#34370)

React Native doesn't support `console.createTask` yet, but it does support `performance.measure` and extensibility APIs for Performance panel, including `detail.devtools` field. Previously, this logic was gated with `if (__DEV__ && debugTask)`, now `debugTask` is no longer required to log render. If there is no console task, we will just call `performance.measure(...)`. The same pattern is used in other reporters.

Ruslan Lesiutin committed Sep 3, 2025 at 17:08 UTC 2805f0ed9e702454527839c0076a9979553c2fd7
1 file changed +46 -28
packages/react-reconciler/src/ReactFiberPerformanceTrack.js
+46 -28
@@ -228,9 +228,20 @@ export function logComponentRender(
228 ? 'tertiary-dark'
229 : 'primary-dark'
230 : 'error';
231 - const debugTask = fiber._debugTask;
232 - if (__DEV__ && debugTask) {
231 +
232 + if (!__DEV__) {
233 + console.timeStamp(
234 + name,
235 + startTime,
236 + endTime,
237 + COMPONENTS_TRACK,
238 + undefined,
239 + color,
240 + );
241 + } else {
242 const props = fiber.memoizedProps;
243 + const debugTask = fiber._debugTask;
244 +
245 if (
246 props !== null &&
247 alternate !== null &&
@@ -268,38 +279,45 @@ export function logComponentRender(
279 reusableComponentDevToolDetails.properties = properties;
280 reusableComponentOptions.start = startTime;
281 reusableComponentOptions.end = endTime;
282 +
283 + if (debugTask != null) {
284 + debugTask.run(
285 + // $FlowFixMe[method-unbinding]
286 + performance.measure.bind(
287 + performance,
288 + '\u200b' + name,
289 + reusableComponentOptions,
290 + ),
291 + );
292 + } else {
293 + performance.measure('\u200b' + name, reusableComponentOptions);
294 + }
295 + }
296 + } else {
297 + if (debugTask != null) {
298 debugTask.run(
299 // $FlowFixMe[method-unbinding]
273 - performance.measure.bind(
274 - performance,
275 - '\u200b' + name,
276 - reusableComponentOptions,
300 + console.timeStamp.bind(
301 + console,
302 + name,
303 + startTime,
304 + endTime,
305 + COMPONENTS_TRACK,
306 + undefined,
307 + color,
308 ),
309 );
279 - return;
310 + } else {
311 + console.timeStamp(
312 + name,
313 + startTime,
314 + endTime,
315 + COMPONENTS_TRACK,
316 + undefined,
317 + color,
318 + );
319 }
320 }
282 - debugTask.run(
283 - // $FlowFixMe[method-unbinding]
284 - console.timeStamp.bind(
285 - console,
286 - name,
287 - startTime,
288 - endTime,
289 - COMPONENTS_TRACK,
290 - undefined,
291 - color,
292 - ),
293 - );
294 - } else {
295 - console.timeStamp(
296 - name,
297 - startTime,
298 - endTime,
299 - COMPONENTS_TRACK,
300 - undefined,
301 - color,
302 - );
321 }
322 }
323 }