Introduction to React Profiler
Profiling is a process of analyzing the performance of web applications with all their components. It can be done through javascript functions like onload, or we could use the browser’s dev tools which enable us to observe the rendering process of each page, and each component example of this can be the lighthouse. It can be specific to library or framework-specific, like we can use Profiler API for its app.
Profiling the performance of a React application is often a time-consuming and challenging process. With the help of it, the performance of individual components could be recorded and interrogate by our app and make this process much easier.
a non-functional type of testing that measures the performance of an application or software under a certain workload. Click to explore about, Performance Testing Tools and Its Best Practices
How to profile a React Application?
To start profiling application in need to follow certain steps mentioned below:-
- Install the Extension: The first step is to make sure you set it within the React DevTools extension for the browser you're using. I'm using Chrome, so I installed it within the Chrome web store.
- Start the app: The app uses react-scripts (thanks to create-react-app), so after you've installed the project locally, run npm run to start to get the development server running. This will call the app in your browser at localhost:3000.
- Start a Profiling Session: To do this, open developer tools by opening "Inspect." from the more tools menu. Now, select the " Profiler" tab. This is the DevTools profiler, and you'll now click the small blue circle to "Start profiling" the appliance.
- Stop a Profiling Session: From here, plow ahead and interact with the app a touch. I'm getting to register for a replacement account. Then click the small red circle to "Stop profiling."
Then we got the data in the form to analyze our app. They are listed below: -
Browsing Commits
Conceptually, React does work in two phases:
The render phase determines what changes have to be made to, e.g., the DOM. During this phase, it calls render to compares the result to the previous render. When React applies, any changes are known as the commit phase. It also calls lifecycles like componentDidUpdate and componentDidMount during this phase. The DevTools profiler groups performance info by commit. Commits are displayed during a bar graph near the highest of the profiler:
Bar chart of profiled commits
The bar in the chart represents a commit with the currently selected is the commit colored black. By clicking on the bar, you can pick a specific commit. The color and height of every bar correspond to how long that commit took to render.
Using React in application brings better performance and minimizes the number of DOM operations used to build faster user interfaces Click to explore about, Performance Testing Tools and Its Best Practices
Flame Chart
The flame chart represents the state of the application for a selected commit. Each bar within the chart represents a React component (e.g., App, Nav). The bar's size and color show how long it took to render the component and its children. (Bar's width represents what proportion of time was spent when the component was last rendered, and therefore the color represents what proportion of a time was spent as a part of the current commit.)
Example flame chart
Note: The bar’s width represents how long it took to render the component (and its children) once they were last rendered. If the component didn't re-render as a neighborhood of this commit, the time represents a previous render. The wider component took longer to render.
The color of a bar indicates how long the component (and its children) took to render within the chosen commit. Components in yellow took longer while components in blue took less time, and gray components didn't render within the least during this commit. For example, the commit shown above took a complete 18.4ms to render. The Router component was the “most expensive” ( took longest to render ) to render (taking 18.4ms). Most of this point was thanks to two of its children, Nav (8.4ms) and Route (7.9ms). The time which remains later is then divided between its remaining children or spent within the component’s render method. Concentrate on a flame chart by clicking on components: Click on a component to concentrate or out.
Clicking on a component will select it, and it will show information within the right-side panel, which incorporates its props and state at the time of this commit. You can drill into these to seek out out more about what the component rendered during the commit:
For viewing a component's state and props of that commit
In corner cases, selecting a component and stepping between commits can also provide us why the component is rendered:
I was seeing which values changed between commits.
The above image shows the state. Scroll offset changed between the commits. This is what caused the List component to re-render.
Ranked Chart
The ranked chart view represents a single commit. Each bar within the chart represents a React component (e.g., App, Nav). The chart is ordered in descending order so that the components which took the longest to render are at the highest.
Example ranked chart
Note: Render time of a component includes the time spent in rendering its children, therefore the components with the longest time to render are near the highest of the tree.
As with the flame chart, you'll concentrate or out on a ranked chart by clicking on components.
a process which is used for increasing the quality of a software or a product and for improving it by identifying defects, problems, and errors. Click to explore about, Javascript and ReactJS Unit Testing
Interactions Charts
It recently added another experimental API for tracing the explanation for an update. “Interactions” traced with this API also are going to be shown within the profiler:
The interactions panel
The image shows a profiling session that traces four interactions. Each row represents an interaction that was traced and will be shown in the image above. The colored dots along the row represent commits that were associated with the interaction.
To see which interactions were traced for the selected commit from the flame chart and ranked chart views as well:
List of interactions for a commit. To navigate between the interactions and commits by clicking on them:
Navigate between interactions and commits.
The tracing API remains new, and we will cover it in additional detail in a future blog post.
It doesn't follow any particular project structure, and the positive thing about this is that it allows us to make up a structure to suit our needs. Click to explore about, ReactJs Project Structure and Folder Setups
Component Chart
Sometimes, it’s helpful to ascertain the percentage of times a specific component was rendered while profiling. The component chart provides this information within the sort of a bar graph. Bars within the chart represent the time when that component is rendered. The color and height of the bar represent how long the component took to render with respect to other components during a particular commit.
Example component chart
The above chart shows us that the List component is rendered 11 times. It also shows that it had been the foremost “expensive” component within the commit (meaning that it took the longest).
We need to either double-click on a component or select a component and click on the blue bar graph icon within the right detail pane to view this chart. You can get back to the previous chart by clicking the “x” button within the right detail pane. You can also double-click on a specific bar to look at more information.
How to view all renders for a selected component?
If the chosen component didn't render in the least during the profiling session, the subsequent message is going to be shown:
No, render times for the selected component.
What are the Challenges of it?
It is certain which slows down the developer's debugging process mentioned below.
Multiple Roots Issue
If you've got multiple roots in your application, it can cause a mistake. The Profiler may display an error saying, “No profiling data has been recorded for the chosen root.” you would like to pick a special root to ascertain whether any data has been recorded for this problem.
Render Thresholds
When a commit is fast, performance now () doesn't give the Profiler any meaningful timing information.
Conclusion
In this blog, we understood React Profiler, the way to enable download and install react profiler to our app, and to see the performance of its applications through charts like flame chart, ranked chart and identify the difficulty and resolve it. Then we looked what the issues we should always have with React Profiler, like the Multiple Root issues and its Threshold issues are.
- Discover more about Testing of Components with Various Methods
- Read more about Reactive Programming Solutions for Monitoring Platform
