Skip to content

Commit

Permalink
Add benchmark for host component class variants (facebook#48450)
Browse files Browse the repository at this point in the history
Summary:

Changelog: [internal]

This implements a basic benchmark to compare `ReactFabricHostComponent` and `ReactNativeElement` (legacy and DOM implementations for native component instances).

Reviewed By: rshest

Differential Revision: D66698546
  • Loading branch information
rubennorte authored and facebook-github-bot committed Jan 6, 2025
1 parent 32c2814 commit 73e758b
Showing 1 changed file with 61 additions and 0 deletions.
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @flow strict-local
* @format
* @oncall react_native
*/

import '../../../Core/InitializeCore.js';
import type {
InternalInstanceHandle,
ViewConfig,
} from '../../../Renderer/shims/ReactNativeTypes';

import ReactNativeElement from '../../../../src/private/webapis/dom/nodes/ReactNativeElement';
import ReactFabricHostComponent from '../../../ReactNative/ReactFabricPublicInstance/ReactFabricHostComponent';
import {benchmark} from '@react-native/fantom';
import nullthrows from 'nullthrows';

// Create fake parameters for the class.
const tag = 11;
const viewConfig: ViewConfig = {
uiViewClassName: 'test',
validAttributes: {
style: {},
},
};
// $FlowExpectedError[incompatible-type]
const internalInstanceHandle: InternalInstanceHandle = {};

benchmark
.suite('ReactNativeElement vs. ReactFabricHostComponent')
.add('ReactNativeElement', () => {
// eslint-disable-next-line no-new
new ReactNativeElement(tag, viewConfig, internalInstanceHandle);
})
.add('ReactFabricHostComponent', () => {
// eslint-disable-next-line no-new
new ReactFabricHostComponent(tag, viewConfig, internalInstanceHandle);
})
.verify(([modernImplResults, legacyImplResults]) => {
const minMedian = Math.min(
nullthrows(modernImplResults.latency.p50),
nullthrows(legacyImplResults.latency.p50),
);
const maxMedian = Math.max(
nullthrows(modernImplResults.latency.p50),
nullthrows(legacyImplResults.latency.p50),
);

const medianDifferencePercent = ((maxMedian - minMedian) / minMedian) * 100;
console.log(
`Difference in p50 values between ReactFabricHostComponent and ReactNativeElement is ${medianDifferencePercent.toFixed(2)}%`,
);

// No implementation should be more than 25% slower than the other.
expect(medianDifferencePercent).toBeLessThan(25);
});

0 comments on commit 73e758b

Please sign in to comment.