React Paint Metrics

React Paint metrics measure the interaction performance of specific React components. At the moment, click and keydown are the only supported interactions.

Usage

Browser

index.js

import { init, paint } from "@palette.dev/browser";

init({
  // ...
  plugins: [paint({ componentPaint: true })],
});

Electron Renderer

renderer.js

import { init, paint } from "@palette.dev/electron/renderer";

init({
  // ...
  plugins: [paint({ componentPaint: true })],
});

Bundler Usage

The PalettePaintPlugin is only enabled when the webpack mode is production.

Webpack

npm

npm install @palette.dev/webpack-plugin --save-dev

pnpm

pnpm install @palette.dev/webpack-plugin --save-dev

yarn

yarn add @palette.dev/webpack-plugin --dev

webpack.config.js

const { PalettePaintPlugin } = require("@palette.dev/webpack-plugin");

module.exports = {
  // ...
  plugins: [new PalettePaintPlugin()],
};

Next.js

npm

npm install @palette.dev/webpack-plugin --save-dev

pnpm

pnpm install @palette.dev/webpack-plugin --save-dev

yarn

yarn add @palette.dev/webpack-plugin --dev

next.config.js

const { PalettePaintPlugin } = require("@palette.dev/webpack-plugin");

module.exports = {
  webpack(config) {
    config.plugins.push(new PalettePaintPlugin());
    return config;
  },
};

Vite

npm

npm install @palette.dev/plugin-vite --save-dev

pnpm

pnpm install @palette.dev/plugin-vite --save-dev

yarn

yarn add @palette.dev/plugin-vite --dev

next.config.js

import { defineConfig } from "vite";
import { paint } from "@palette.dev/plugin-vite";

export default defineConfig({
  plugins: [paint()],
});

Options

Option	Type	Default	Description
test	RegExp (optional)	/\.[jt]sx?$/ (.{ts/js/tsx/jsx} extensions)	Pattern of paths to be processed
include	RegExp (optional)	All files in all directories	Pattern of paths to include
exclude	RegExp (optional)	/node_modules/	Pattern of paths to ignore

Example 1: Only process .ts and .tsx files in certain directories:

new PalettePaintPlugin({
  test: /\.tsx?$/, // Only process .ts and .tsx files
  include: /(src\/components|src\/utils)\/, // Only process files in the src/components and src/utils directory
});

Example 2: Process all .js and .jsx files in all directories except one:

new PalettePaintPlugin({
  test: /\.jsx?$/, // Only process .js and .jsx files
  exclude: /build/, // Ignore files in node_modules
});

Visualizing Interaction Metrics

React Paint metrics are categorized as markers named <Your Component> <interaction> to Paint. See this guide on how to add marker metrics to your Metrics Chart.

Overriding Component Hierarchies

Sometimes you want to instrument parent components for performance instead of a child component. For example, in the example below you'd like to instrument all parents of Text:

<Header>
  <Text >
</Header>
<Paragraph>
  <Text >
</Paragraph>

By default, when a user types in Text, React Paint metrics will be created for Text as Text keydown to Paint. Adding the data-palette-root data atribute to a component will mark it as a "root", allowing metrics to be created for it instead of its child component. After marking these components as "root", when the user types in Text paint metrics will be created for Header and Paragraph.

const Header = () => {
  return <div data-palette-root>...</div>;
};

Precision

Palette collects interaction timings for React Paint metrics directly from the browser using the EventTiming API. To prevent timing attacks, the browser rounds paint timings to the nearest 8ms. Because of this, all interaction timings will be +/-4ms from the actual paint time.