Benchmark Table
Ranked results with variance. A difference inside the combined error bars is reported as "within noise" rather than as a win — printing "1.03× faster" from two noisy runs is how performance myths start.
src/components/ui/benchmark-table.tsxAbout
From the component's own source, where it was written.
Benchmark results, ranked, with variance.
Variance is shown alongside every result and a difference inside the combined error bars is reported as inconclusive rather than as a winner. A benchmark table that prints "1.03× faster" from two noisy runs is how performance myths start, and refusing to call that a win is the entire value of this component.
Relative speed is expressed against the fastest, and the direction is stated in words. "2.4×" is ambiguous without knowing whether higher is better — ops/sec and nanoseconds point opposite ways and both are normal here.
The bar is logarithmic when the spread exceeds two orders of magnitude. Linear bars turn a 1000× spread into one full bar and nine invisible ones.
Install
npx astralyx-ui add benchmark-table
Usage
import { BenchmarkTable } from '@/components/ui/benchmark-table'
<BenchmarkTable results={results} unit="ops/s" />Composer
Change the props and the source below follows.
- naive concatfastest4,120,000 ±88,000ops/sn=96
- cn (compiled)2.24× slower1,842,000 ±41,000ops/sn=96
- twJoin2.27× slower1,811,000 ±52,000ops/sn=96
- twMerge + clsx67.10× slower61,400 ±2,100ops/sn=96
<BenchmarkTable results={results} unit="ops/s" higherIsBetter={true} />Examples
A run against a baseline
<BenchmarkTable results={results} />API
Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.
BenchmarkTable
Extends Omit<ComponentProps<'div'>, 'children' | 'results'>.
| Prop | Type | Default | Description |
|---|---|---|---|
| results | BenchmarkResult[] | required | { name, value, error?, samples? }. error is a standard deviation or margin, in the same unit as value. |
| unit | string | 'ops/s' | — |
| higherIsBetter | boolean | true | ops/sec: true. Nanoseconds per op: false. "2.4×" is ambiguous without it, and both directions are normal. |
| baselineLabel | ReactNode | 'fastest' | — |
| inconclusiveLabel | ReactNode | 'within noise' | Marks a result whose error bars overlap the leader's. |
| samplesLabel | ReactNode | 'n' | — |
| scale | log past 100× | — | Linear bars turn a 1000× spread into one full bar and nine invisible ones. |
Types
BenchmarkResult
Benchmark results, ranked, with variance.
| Field | Type | Description |
|---|---|---|
| name | ReactNode | — |
| value | number | The measurement. |
| error? | number | Standard deviation or margin of error, same unit as value. |
| samples? | number | — |
Behaviour
| Topic | Detail | Description |
|---|---|---|
| inconclusive | derived | Overlapping error bars against the leader. Refusing to call that a win is the point of the component. |