Usually, writing console.log or custom code to trace the root of bugs in React applications can be sufficient. However, when one works with a more extensive unfamiliar codebase, even tiny bugs can become challenging to tackle.
In this article, I would like to share my experience working with React Profiler, which enables a more efficient way of debugging applications and detects the potential issues in applications that sometimes cannot even be noticed by the end user.
Installing the Profiler
The React Profiler is an extension for all major browsers: Profiling Components with the DevTools Profiler.
Highlighting Components Render
One of the frequent problems in React development is managing the state of components and preventing them from extra unwanted re-renders. When working on some features, it is good to check whether components affected by our changes suddenly have yet to change their lifecycle. The profiler comes with a great feature of highlighting every component rendered right in the viewport. To enable it, you have to have the DevTools open and select the Highlight updates when components render checkbox:
Once the feature is enabled, whenever you have your DevTools opened, you will see which components are rerendered.
This becomes handy if you, for example, play with table components and want to see if the page header (separate from the table component) is not rerendered once you update the table filters. These components are not connected (do not share the common state or send properties) by the implementation, and this is what that would look like:
In my case, I have encountered one issue with an empty state in my application: the message has been rerendering infinitely (the yellow outlines did not go away). This bug must have been there for a long time since, as an end user, there is no real visible problem (maybe your laptop fan would notice it, though):
Profiling Components
The profiler gives an excellent collection of tools that can quickly help trace the cause of component render.
Having a page that you went to profile open, at DevTools, go to the Profiler section and click on a blue dot Start profiling. In our example, 1–2 seconds was enough to capture all the page component updates.
After the profiling is complete, it shows you a flamegraph divided by commits, where each commit tells how the React component tree was updated. The gray color means the component was not updated, whereas other colors tell the components were rerendered. Hovering on the particular component will also explain the reason for a rerender.
In our example, the reason was that we had two hooks changed:
Well, what exactly do Hooks 7 and 8 mean? To check this, we must return to the Components sections and look at this problematic component in the components tree. This will provide you with a nice summary of the state, properties, and other useful information:
Still, this did not tell you much about what Hooks 7 and 8 mean. However, the order of hooks in the list is equal to how the hooks are written right in the source code of the components. Finally, looking at the code, I was able to identify the culprit and see that one of my useEffects relies on a state variable that is updated with every render and causing this render loop (in more detail, the problem here was that even though the array stayed empty ([]), in JavaScript, two empty arrays are considered non-equal by the strict equation.
This made the useEffect to be triggered again because of the “new value”:
Conclusion
React Profiler is a great tool for debugging front-end applications. This lets you quickly identify the problems without digging into the code editor and trying to tweak the component lifecycle.
In this article, I covered what it actually can. Besides the profiler and component tree, it lets you measure performance or enhance the debugging mode.
Original article: https://blog.gkarat.com/react/2022/06/14/debugging-with-react-profiler.html.
Debugging Frontend Applications With React Profiler was originally published in Better Programming on Medium, where people are continuing the conversation by highlighting and responding to this story.