rcb

react-component-benchmark

A component utility for estimating benchmarks of React components

Showing:

Popularity

Downloads/wk

48

Maintenance

No Maintenance Data Available

Package

Dependencies

0

Size (min+gzip)

2.0KB

License

MIT

Type Definitions

Tree-Shakeable

Yes?

Readme

React Component Benchmark Build Status

This project aims to provide a method for gathering benchmarks of component tree mount, update, and unmount timings.

Please note that the values returned are estimates. Since this project does not hook into the React renderer directly, the values gathered are not 100% accurate and may vary slightly because they're taken from a wrapping component. That being said, running a large sample set should give you a confident benchmark metric.

Motivation

Historically, React has provided react-addons-perf in order to help gain insight into the performance of mounting, updating, and unmounting components. Unfortunately, as of React 16, it has been deprecated. Additionally, before deprecation, it was not usable in production React builds, making it less useful for many applications.

Usage

See the examples directory for ideas on how you might integrate this into your own project, whether in your user-interface or your automated tests.

Quick Start

import Benchmark, { BenchmarkType } from 'react-component-benchmark';

function MyComponentBenchmark() {
  const ref = React.useRef();

  const handleComplete = React.useCallback((results) => {
    console.log(results);
  }, []);

  const handleStart = () => {
    ref.start();
  };

  return (
    <div>
      <button onClick={handleStart}>Run</button>
      <Benchmark
        component={MyComponent}
        componentProps={componentProps}
        onComplete={handleComplete}
        ref={ref}
        samples={50}
        timeout={10000}
        type={BenchmarkType.MOUNT}
      />
    </div>
  );
}

In tests

See examples/tests for various test integrations.

Build a UI

Benchmark props

keytypedescription
componenttypeof React.ComponentThe component that you would like to benchmark
componentPropsobjectProperties to be given to component when rendering
includeLayoutbooleanEstimate the amount of time that the browser's rendering engine requires to layout the rendered HTML. Only available for 'mount' and 'update' benchmark types. Default: false
onComplete(x: BenchResultsType) => voidReceives the benchmark results when the benchmarking is complete
samplesnumberSamples to run (default 50)
timeoutnumberAmount of time in milliseconds to stop running (default 10000)
typestringOne of 'mount', 'update', or 'unmount'. Also available from BenchmarkType.

Results

Note: All times and timestamps are in milliseconds. High resolution times provided when available.

keytypedescription
......ComputedResultAll values from the ComputedResult table
startTimenumberTimestamp of when the run started
endTimenumberTimestamp of when the run completed
runTimenumberAmount of time that it took to run all samples.
sampleCountnumberThe number of samples actually run. May be less than requested if the timeout was hit.
samplesArray<{ start, end, elapsed }>Raw sample data
layoutComputedResultThe benchmark results for the browser rendering engine layout, if available (see includeLayout property)

ComputedResult

keytypedescription
maxnumberMaximum time elapsed
minnumberMinimum time elapsed
mediannumberMedian time elapsed
meannumberMean time elapsed
stdDevnumberStandard deviation of all elapsed times
p70number70th percentile for time elapsed: mean + stdDev
p95number95th percentile for time elapsed: mean + (stdDev * 2)
p99number99th percentile for time elapsed: mean + (stdDev * 3)

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100