• Stars
    star
    384
  • Rank 111,726 (Top 3 %)
  • Language
    TypeScript
  • License
    MIT License
  • Created about 7 years ago
  • Updated 8 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

A component to help benchmark React components and their trees.

React Component Benchmark NPM version CI 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

key type description
component typeof React.Component The component that you would like to benchmark
componentProps object Properties to be given to component when rendering
includeLayout boolean Estimate 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) => void Receives the benchmark results when the benchmarking is complete
samples number Samples to run (default 50)
timeout number Amount of time in milliseconds to stop running (default 10000)
type string One of 'mount', 'update', or 'unmount'. Also available from BenchmarkType.

Results

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

key type description
... ...ComputedResult All values from the ComputedResult table
startTime number Timestamp of when the run started
endTime number Timestamp of when the run completed
runTime number Amount of time that it took to run all samples.
sampleCount number The number of samples actually run. May be less than requested if the timeout was hit.
samples Array<{ start, end, elapsed }> Raw sample data
layout ComputedResult The benchmark results for the browser rendering engine layout, if available (see includeLayout property)

ComputedResult

key type description
max number Maximum time elapsed
min number Minimum time elapsed
median number Median time elapsed
mean number Mean time elapsed
stdDev number Standard deviation of all elapsed times
p70 number 70th percentile for time elapsed: mean + stdDev
p95 number 95th percentile for time elapsed: mean + (stdDev * 2)
p99 number 99th percentile for time elapsed: mean + (stdDev * 3)

More Repositories

1

normalizr

Normalizes nested JSON according to a schema
JavaScript
20,968
star
2

swig

Take a swig of the best template engine for JavaScript.
JavaScript
3,108
star
3

build-tracker

A set of tools to track the size of your build artifacts over time.
TypeScript
439
star
4

onerepo

Easy, strict, safe, and fast JavaScript & TypeScript monorepo toolchain for high performance teams.
TypeScript
124
star
5

node-templates

Benchmarking various Node.js template engines
JavaScript
97
star
6

swig-extras

A collection of handy tags, filters, and extensions for Swig, the most awesome template engine for node.js.
JavaScript
71
star
7

basejs

baseJS is a work-in-progress lightweight JavaScript library for Safari, Firefox, and especially Mobile Safari. Be sure to run 'git submodule init' and 'git submodule update' upon first clone of baseJS to get Sizzle imported.
JavaScript
61
star
8

mocha-to-jest-codemod

Convert Mochan TDD with Chai assert tests to Jest
JavaScript
42
star
9

monorepo-ts

A git repo template for setting up TypeScript Monorepos
JavaScript
39
star
10

react-stateful-firestore

Bindings to provide authentication and access to Firestore data in React.
JavaScript
20
star
11

dotfiles

My setup and config files.
Shell
19
star
12

still

A static site generator built with node.js
JavaScript
16
star
13

jest-multi-project-example

JavaScript
15
star
14

remove-aliasing

Remove module import aliasing from your codebase
JavaScript
11
star
15

ImpactJS.tmbundle

A Textmate bundle: snippets, language, and templates for ImpactJs
JavaScript
10
star
16

paularmstrong.dev

Paul is a Principal Software Engineer with deep experience leading teams and building amazing experiences using many different “front-end” web technologies. The list is deep and topics can range from JavaScript, Typescript, Node.js, React, CSS, PWAs, developer experience, testing, continuous integration, and more. This is his website’s github repo.
MDX
10
star
17

build-tracker-heroku

Quickly and easily deploy a new Build Tracker application to Heroku
JavaScript
8
star
18

ImpactTest

A wrapper to allow unit testing of Impact.js through Node.js
JavaScript
8
star
19

build-tracker-action

GitHub Action for adding Build Tracker comparisons to pull requests
JavaScript
6
star
20

photobooth

Take photos and videos using any webcam and a 6-button Elgato Streamdeck.
TypeScript
6
star
21

Swig.tmbundle

A Textmate Bundle for Swig.
5
star
22

CSSlider

A Slideshow tool built with HTML, JS, and CSS3
JavaScript
5
star
23

node-web-boilerplate

JavaScript
5
star
24

reui

reUI is a set of reusable react components using Tailwindcss and react-aria
TypeScript
3
star
25

JSGestureRecognizer

Touch gesture events for the DOM.
JavaScript
3
star
26

nko-jackalope-promo

Promo Page for Node Knockout Jackalope project
JavaScript
3
star
27

LabelOver

A jQuery plugin that handles dynamically placing an HTML label over its associated input.
JavaScript
2
star
28

react-component-benchmark-example

Created with CodeSandbox
TypeScript
2
star
29

babel-plugin-transform-stateless-jsx-calls

JavaScript
1
star
30

commandapp

JavaScript
1
star