Table of Contents
Metronome is a tool used to better improve render times of components. Have you ever had an issue with pin pointing why a component hasn't rendered efficiently in a application? Metronome will help with honing in on what causes slow render times and go indepth on where to update the code.
Here's why:
- Certain components may re-render inefficently due to a multitude of factor; with Metronome, components can be identified and be refactored for better render times
- With the graphs provided by Metronome, developers can better see which components is taking the longest to render
- The component tree and the record feature will aid developers in visualizing each individual component when tracking down the cause of slow render times in their application
In order for Metronome to function, you will need to intsall the latest chrome extension of React Developer Tools. This only works for functional components and not class components.
-
Clone the repo
git clone https://github.com/oslabs-beta/metronome.git
-
Install NPM packages
cd metronome npm install cd chrome-extension npm install
-
Build DIST folder
npm start
- Go to chrome://extensions/
- Click on Load unpacked
- Locate the file in the filpath (metronome/chrome-extension/dist) and select
- Once the extension is loaded, go to detail section and turn on "Allow access to file URLs"
Before we show the visualizations and charts powered by Metronome, let’s first go through the data parsing. Metronome parses through the React fiber tree for each recorded action that was profiled by the user, and filters out non-functional components(which are not part of the virtual DOM) in the object.
In addition to this, Metronome determines whether a component has rendered with logic that compares the render data between the node and its children, and establishes the relationship between the current node and the overall fiber tree. It then pulls the actual duration and self based duration of each rendered component and tracks the number of times a component renders during the recorded action.
Metronome presents a real-time visualization of the component tree by parsing through the React Fiber Tree and presenting functional components as state and props change over time. This allows users to easily see the relationship between the components.
Example of a component tree rendered by Metronome
Users can see the tree update in real time as components are updated in the application.
Have you ever wondered which part of your React application is taking the longest to render? Or wondered how many times a component re-renders when you click refresh? Metronome aims to help developers analyze and troubleshoot their React applications by providing visualizations of these metrics.
With the parsed data, Metronome compiles and displays the sum of all self-based durations for all instances that a specific component renders during a recorded action that was profiled by the user.
Example of a component tree rendered by Metronome
The component render durations is a pie chart that shows the breakdown of all components that have actively rendered during the profiled event, and as shown in the screenshot below, a user can get a breakdown of which components rendered for the longest duration (measured in ms). This informs the user of what is taking up the most render time when they perform specific actions in their React application.
Metronome lends insight for users to track how many times a component has rendered when a specific action in the React application is profiled by the user. For example, When you click refresh, how many times does your Navbar render? This could be helpful for users to optimize their React applications and pinpoint inefficiencies in their app.
In the bar chart, Metronome ranks and displays the number of times a component has rendered during the profiled event. This is updated each time a user is done profiling a new action on their React Application.
Bar Chart in Metronome for a Sample React Application
We use a React Dev Tool object called ‘REACT_DEVTOOLS_GLOBAL_HOOK’ which allows us to access the react fiber for each event snapshot when render events occur. This object contains component information and the pre-formatted component tree that we then parse through to create the visualization that you see in Metronome. We dived deep into the object to understand how the React Dev Tool parses through the data to determine which components have rendered and which have not, Note: AD stands for Actual Duration, which, similar to self-based duration, is a property for each component in the React fiber. Actual Duration is found to be the total duration for a component to render in React, including the time it took for all of its child components to render. Self-based Duration is found to be the duration for a component to render in React, excluding its children’s render times. But it does not stop there, we have found that additional logic and parsing is required to accurately reflect whether a component has rendered or not. For each node, after we’ve filtered out all of the Non-functional components and have established parent-children relationships by parsing through the tree, here’s the logic we use to parse through the object:
Disclaimer on the tool: we have found that in rare occurrences, when a component’s actual duration is equal to the sum of its immediate child component(s) actual durations, most of the time this means that the component did not render, with the exception that sometimes the parent will have rendered for <0.1ms (a negligible amount), this is not clearly explained in React Dev Tools but the occurrence is rare and there’s some inner logic in the React Dev Tool beyond the object that we that we are not able to access.
Distributed under the MIT License. See LICENSE.txt for more information.