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.

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.

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.

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.

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.

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.

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