DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for Debug your React app like a Pro
Mitchell Mutandah
Mitchell Mutandah

Posted on

Debug your React app like a Pro

When hunting for actual bugs in the code, we need to focus on tools and systematic processes to analyse the code in search of what's not working and accept the fact that the person that wrote the code may not be available to answer our questions. Sometimes, though, the bug might have been introduced by ourselves πŸ™‹β€β™‚οΈ, and we can find it difficult to step in the shoes of our past selves in order to understand why we did what we did. No matter what's the case, they all have something in common: we need to use tools to help us debug the app and find what's wrong with it.

I have come up with a shortlist of tools/methods that when implemented correctly, you'll be debugging like a pro. So let's get started.
debug

React Dev Tools.
React Developer Tools is a browser DevTools extension. It allows you to inspect the React component hierarchies in the Chrome Developer Tools. The tool helps track the state and to have a holistic overview of the component hierarchy.
devtool

Why Did You Render?
Why-did-you-render by Welldone Software monkey patches React to notify you about potentially avoidable re-renders. (Works with React Native as well.). It can help you to simply track when and why a certain component re-renders.
wdyr

Realize For React
Realize is a browser extension for React component tree visualizer. As React applications scale, it becomes more difficult to track state and to have a holistic overview of the component hierarchy. Realize is a tool to help developers visualize the structure and state flow of their React applications, especially when they are growing in scale and complexity.
realize

Chrome Performance Profiler
The Profiler measures how often a React application renders and what the β€œcost” of rendering is. Its purpose is to help identify parts of an application that are slow and may benefit from optimizations such as memoization.
pro

Sapling: Extension On VSCode
Sapling is a VS Code extension built with React developers in mind.
With Sapling, you don't have to guess at the parent component of your current file. You can build your tree by selecting any component file as the root and get information about the available props at any level.
sap

PS: I'm sure I haven't covered all the techniques available for debugging a React app, so if you have one that's your favourite and that is not listed here, please share it in the comments so we can all learn from it. 😊

Thats it!! #HappyCoding

cheers

Top comments (4)

Collapse
 
mitchiemt11 profile image
Mitchell Mutandah

Thank you so much DeanKnight. I'm glad that the post is valuable.

Collapse
 
jonrandy profile image
Jon Randy πŸŽ–οΈ

Heads up - huge typo in your header image

Collapse
 
mitchiemt11 profile image
Mitchell Mutandah • Edited on

Nice catch Jon Randy. I have just changed the header and updated the post.
Thanks for the heads-up

Timeless DEV post...

Git Concepts I Wish I Knew Years Ago

The most used technology by developers is not Javascript.

It's not Python or HTML.

It hardly even gets mentioned in interviews or listed as a pre-requisite for jobs.

I'm talking about Git and version control of course.

One does not simply learn git