7. Debugging React Apps

The text explains that when working with React, you will inevitably encounter errors and bugs in your code. In this section, you’ll learn methods and tools to debug your React apps efficiently. This includes understanding error messages provided by React, using browser developer tools and debuggers to fix logical errors, enabling React’s Strict Mode to catch potential issues, and utilizing React DevTools for further inspection and troubleshooting.

The speaker explains that they have taken an earlier investment calculator project and made some minor modifications to introduce small errors. This updated project is available both locally and on CodeSandbox. Even if you haven’t built the project yourself before, you can follow along since the modified version is required for this section. The project is simple—with a few components handling state and computed values—and will be used as a starting point to learn about identifying and fixing bugs in React applications.

The speaker walks through a debugging process for a React project that crashes when a user enters a zero or negative duration. At first, everything seems to work until an error occurs: a property (valueEndOfYear) is attempted to be read from an undefined value. By examining the error message and its stack trace, it becomes clear that the error originates in the Results component where the property is accessed. Tracing further reveals that the underlying issue is an empty results array—because the for loop that populates it never runs when the duration is zero or negative. The speaker then shows how to fix the error by adding a guard clause that checks if the array is empty and returns a message (instead of trying to access the non-existent property), ensuring the app no longer crashes and the user sees a meaningful error message.

The speaker discusses debugging logical errors in React code, specifically addressing an issue where changing the initial investment value causes incorrect calculations without any error messages. The debugging process involves using Chrome DevTools (or similar tools in other browsers) to set breakpoints in the code and step through its execution, examining variable values at each step. The root cause of the issue is identified as the input values being treated as strings instead of numbers, leading to concatenation instead of addition in the calculations. The solution is to convert the input value to a number using the unary plus operator before storing and using it in calculations.