diff --git a/packages/react-reconciler/src/SchedulingProfiler.js b/packages/react-reconciler/src/SchedulingProfiler.js index c6032014a198..7e06b9821600 100644 --- a/packages/react-reconciler/src/SchedulingProfiler.js +++ b/packages/react-reconciler/src/SchedulingProfiler.js @@ -15,6 +15,7 @@ import { enableSchedulingProfiler, enableSchedulingProfilerComponentStacks, } from 'shared/ReactFeatureFlags'; +import ReactVersion from 'shared/ReactVersion'; import getComponentName from 'shared/getComponentName'; import {getStackByFiberInDevAndProd} from './ReactFiberComponentStack'; @@ -29,6 +30,13 @@ function formatLanes(laneOrLanes: Lane | Lanes): string { return ((laneOrLanes: any): number).toString(); } +// Create a mark on React initialization +if (enableSchedulingProfiler) { + if (supportsUserTiming) { + performance.mark(`--react-init-${ReactVersion}`); + } +} + export function markCommitStarted(lanes: Lanes): void { if (enableSchedulingProfiler) { if (supportsUserTiming) { diff --git a/packages/react-reconciler/src/__tests__/SchedulingProfiler-test.internal.js b/packages/react-reconciler/src/__tests__/SchedulingProfiler-test.internal.js index 3afc4bfb5443..ce6bc2ac0904 100644 --- a/packages/react-reconciler/src/__tests__/SchedulingProfiler-test.internal.js +++ b/packages/react-reconciler/src/__tests__/SchedulingProfiler-test.internal.js @@ -10,6 +10,8 @@ 'use strict'; +import ReactVersion from 'shared/ReactVersion'; + function normalizeCodeLocInfo(str) { return ( str && @@ -54,6 +56,7 @@ describe('SchedulingProfiler', () => { beforeEach(() => { jest.resetModules(); global.performance = createUserTimingPolyfill(); + marks = []; React = require('react'); @@ -62,8 +65,6 @@ describe('SchedulingProfiler', () => { ReactNoop = require('react-noop-renderer'); Scheduler = require('scheduler'); - - marks = []; }); afterEach(() => { @@ -76,11 +77,17 @@ describe('SchedulingProfiler', () => { expect(marks).toEqual([]); }); + // @gate enableSchedulingProfiler + it('should log React version on initialization', () => { + expect(marks).toEqual([`--react-init-${ReactVersion}`]); + }); + // @gate enableSchedulingProfiler it('should mark sync render without suspends or state updates', () => { ReactTestRenderer.create(
); expect(marks).toEqual([ + `--react-init-${ReactVersion}`, '--schedule-render-1', '--render-start-1', '--render-stop', @@ -95,7 +102,10 @@ describe('SchedulingProfiler', () => { it('should mark concurrent render without suspends or state updates', () => { ReactTestRenderer.create(
, {unstable_isConcurrent: true}); - expect(marks).toEqual(['--schedule-render-512']); + expect(marks).toEqual([ + `--react-init-${ReactVersion}`, + '--schedule-render-512', + ]); marks.splice(0); @@ -128,6 +138,7 @@ describe('SchedulingProfiler', () => { expect(ReactNoop.flushNextYield()).toEqual(['Foo']); expect(marks).toEqual([ + `--react-init-${ReactVersion}`, '--schedule-render-512', '--render-start-512', '--render-yield', @@ -148,6 +159,7 @@ describe('SchedulingProfiler', () => { ); expect(marks).toEqual([ + `--react-init-${ReactVersion}`, '--schedule-render-1', '--render-start-1', toggleComponentStacks( @@ -184,6 +196,7 @@ describe('SchedulingProfiler', () => { ); expect(marks).toEqual([ + `--react-init-${ReactVersion}`, '--schedule-render-1', '--render-start-1', toggleComponentStacks( @@ -220,7 +233,10 @@ describe('SchedulingProfiler', () => { {unstable_isConcurrent: true}, ); - expect(marks).toEqual(['--schedule-render-512']); + expect(marks).toEqual([ + `--react-init-${ReactVersion}`, + '--schedule-render-512', + ]); marks.splice(0); @@ -262,7 +278,10 @@ describe('SchedulingProfiler', () => { {unstable_isConcurrent: true}, ); - expect(marks).toEqual(['--schedule-render-512']); + expect(marks).toEqual([ + `--react-init-${ReactVersion}`, + '--schedule-render-512', + ]); marks.splice(0); @@ -304,7 +323,10 @@ describe('SchedulingProfiler', () => { ReactTestRenderer.create(, {unstable_isConcurrent: true}); - expect(marks).toEqual(['--schedule-render-512']); + expect(marks).toEqual([ + `--react-init-${ReactVersion}`, + '--schedule-render-512', + ]); marks.splice(0); @@ -340,7 +362,10 @@ describe('SchedulingProfiler', () => { ReactTestRenderer.create(, {unstable_isConcurrent: true}); - expect(marks).toEqual(['--schedule-render-512']); + expect(marks).toEqual([ + `--react-init-${ReactVersion}`, + '--schedule-render-512', + ]); marks.splice(0); @@ -377,7 +402,10 @@ describe('SchedulingProfiler', () => { ReactTestRenderer.create(, {unstable_isConcurrent: true}); - expect(marks).toEqual(['--schedule-render-512']); + expect(marks).toEqual([ + `--react-init-${ReactVersion}`, + '--schedule-render-512', + ]); marks.splice(0); @@ -414,7 +442,10 @@ describe('SchedulingProfiler', () => { ReactTestRenderer.create(, {unstable_isConcurrent: true}); - expect(marks).toEqual(['--schedule-render-512']); + expect(marks).toEqual([ + `--react-init-${ReactVersion}`, + '--schedule-render-512', + ]); marks.splice(0); @@ -449,7 +480,10 @@ describe('SchedulingProfiler', () => { ReactTestRenderer.create(, {unstable_isConcurrent: true}); - expect(marks).toEqual(['--schedule-render-512']); + expect(marks).toEqual([ + `--react-init-${ReactVersion}`, + '--schedule-render-512', + ]); marks.splice(0); @@ -489,6 +523,7 @@ describe('SchedulingProfiler', () => { gate(({old}) => { if (old) { expect(marks.map(normalizeCodeLocInfo)).toEqual([ + `--react-init-${ReactVersion}`, '--schedule-render-512', '--render-start-512', '--render-stop', @@ -508,6 +543,7 @@ describe('SchedulingProfiler', () => { ]); } else { expect(marks.map(normalizeCodeLocInfo)).toEqual([ + `--react-init-${ReactVersion}`, '--schedule-render-512', '--render-start-512', '--render-stop',