An open source utility library for measuring React component render times.

• Prerequisites
  • Browser context
  • Production build with a twist
• APIs
  • record
  • report
• Examples
  • Using with Puppeteer
• Getting Started
• Installation
• Docker
• FAQS

React pinpoint must run inside a browser context to observe the React fiber tree. We recommended using automation software such as puppeteer to achieve this.

React optimises your development code base when you build for production, which decreases component render times. Users should therefore run react pinpoint against their production code

However, tweaks need to be made to the build process to preserve component names and enable render time profiling. Steps for doing so can be found here.

• page <Page> Puppeteeer page instance
• url <string> address React page is hosted at
• rootId <string> id of dom element that React is mounted to
• returns: <Page> Puppeteeer page instance with a listener attached to React components

This function attaches a listener to the Puppeteer page's react root for recording changes

• page <Page> Puppeteeer page instance with record listener attached
• threshold <Number> cutoff for acceptable component render time (in ms)
  • default time is 16ms
• returns: Node[] An array of nodes belonging to each react component that exceeded the given render time threshold

Will report all component render times that exceed the given threshold in ms

If no threshold is given, the default threshold of 16ms is used (please see FAQ “Why is the default render threshold 16ms?”)

const puppeteer = require('puppeteer');
const reactPinpoint = require('react-pinpoint');

(async () => {
  const browser = await puppeteer.launch({});
  const page = await browser.newPage();

  // Pass information to
  const url = 'http://localhost:3000/calculator';
  const rootId = '#root';
  await reactPinpoint.record(page, url, rootId);

  // Perform browser actions
  await page.click('#yeah1');
  await page.click('#yeah2');
  await page.click('#yeah3');

  // Get all components that took longer than 16ms to render during browser actions
  const threshold = 16;
  const slowRenders = await reactPinpoint.reportTestResults(page, threshold);

  await browser.close();
})();

1. Head over to the React Pinpoint website.
2. Register for an account.
3. Add a project and fill in the details.
4. Copy the project ID provided.

Using npm:

npm install -D react-pinpoint

Using yarn:

yarn add react-pinpoint -D

• Invoke mountToReactRoot and paste the project ID you received from the website as the second argument in your React project’s entry file:

mountToReactRoot(rootDom, projectID);

• Interact with your app and data will be sent to React Pinpoint website.
• Refresh the page and see your data displayed!

React pinpoint was designed with the goal of regression testing component render times within a CICD, we therefore offer several preconfigured docker containers to assist with using React pinpoint within a CICD as well as with examples for doing so.

• Puppeteer

Since React has moved to using a React Fiber infrastructure, different component types are assumed to generate different trees.

The recommended render time is 60 FPS.

Yes! Due to the component render times being driven by component logic, a GUI is not needed to capture them.