Skip to main content

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.


import { init, paint } from "";

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

Bundler Usage

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

npm install --save-dev
const { PalettePaintPlugin } = require("");

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


testRegExp (optional)/\.[jt]sx?$/ (.{ts/js/tsx/jsx} extensions)Pattern of paths to be processed
includeRegExp (optional)All files in all directoriesPattern of paths to include
excludeRegExp (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:

<Text >
<Text >

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>;


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.

© 2024 Redraw, Inc.