Measurer

The Measurer component includes the Profiler component from the React Profiler API. The Profiler measures how often a React application renders and its “cost” of rendering. You can use the Measurer component by passing it the component you want to measure. Alternatively, you can wrap any component located on the components page with the Measurer component. The component performance details provided by React Profiler API are logged in the console. You can find detailed information about the log messages here.

info

You can only see Measurer logs in development mode.

Example

Live Editor

<Measurer id="Button"> <Button label="Button" onClick={() => { console.log('Button Clicked'); }} /> </Measurer>

<Measurer id="Button">
  <Button
    label="Button"
    onClick={() => {
      console.log('Button Clicked');
    }}
  />
</Measurer>

Result

Loading...

Props

Name	Type	Default
id *	string	—
data-{foo} Data attributes can be used by testing libraries to retrieve components or assert their existence	string	—
* - the prop is required.