Debug Your React App, But Don't Die Trying: A How-To Guide

There are so many weird things that happen when you're working on a React app. Sometimes you fix a bug in one place and it causes a bug in some seemingly unrelated area. It's like a game of whack-a-mole and you can approach it with a strategy.

Take advantage of all the browser tools

You might be able to quickly find the problem by looking at the network tab in the developer tools of your browser and notice an odd status code. You can also use the element tab to start tracking down DOM or event issues. Sometimes you can start by inspecting an element and that will show you the right source file to dig in. With React in particular, installing the React Dev Tools in Chrome is a game-changer. You can look at the props of components, find out which components are nested inside of each other, and see if things are being rendered as you expect. Use these tools to give you a great place to start looking for an issue.

Start in a file that comes from your browser tool search

Once you've figured out which file is a good starting point, jump in there and start looking for anything unusual. Are there any states that aren't being updated? Is there a function that isn't being called as expected? Is there an unnecessary div that's throwing off your styles? This is where the debugging effort can take you down the rabbit hole. Try and approach it as systematically as possible. If you found the method that's causing issues, start drilling in there. Spend some time looking in this place, but if you notice you're spending more than an hour there, it might be time to go down another rabbit hole.

Make sure you're passing the right data in the right format

One of the things you have to deal with when working with JavaScript is that it isn't a strongly-typed language. That means the shape of your data can change at any time and cause the strangest things to happen and silently cause errors. Many times this is how we end up with those undefined values that we know for a fact have real values. Using Typescript is one way around this, but if your project isn't in a place to start integrating that, you'll have to pay attention to any changes to APIs you work with. A common thing that happens is that there are changes on the back-end that don't get communicated to the front-end developers. So make sure you check your data before you start a major refactor.

Check any parent components

Sometimes the real issue isn't with the component or function you're looking at. One good example is if you can't get

position: sticky

to work. There might be some parent element high up in the DOM tree that has an

overflow: hidden

property set. This can be true for a number of issues.

You might have a context that is pulling from the wrong data source or it doesn't actually have state hooks set up like you thought it would. When you've torn apart a file looking for the bug, try going up a level. The root cause could be buried in a place you wouldn't suspect.

Compare files

Many times our components and views are created using similar architectures. As an app grows, it's not uncommon for a view or component to fall out of the standard set up. Check that the problem file looks similar to other files like it. Finding those clues by looking for examples from other parts of the app will rule out the simple stuff early on. Having this kind of uniformity in a codebase helps find and prevent issues because you can visually spot the difference between files. Maybe there's a prop not being passed to the right component or maybe there's a component that should be used instead of what's in place.

Check your packages

There are some packages that aren't compatible with each other. That could be the problem if you've drilled down in the code and landed in the

node_modules

folder. This is a deeper issue and one that might lead to crawling through Stack Overflow. To start a check for this, take a look at the versions in your

package.json

and then take a look at the current version on the npm site.

You might find that your installed version is out of date or that you're not using the package you thought you were. When your debugging leads you here, it's time to start looking for workarounds or replacements.

Those miscellaneous checks

Sometimes there are just weird things combining to make the perfect bug storm. If you're having issues with data loading, make sure it's not a CORS or permissions problem. If you can't figure out why those styles aren't quite right, check for styles on the parent components. Having routing issues? Check that the routes are defined in the correct place with the right components. Maybe the state management approach in the app is a little difficult to understand, so add comments as you figure things out. That will pay off tremendously in the future.Debugging is hard. There are bugs that take time to track down, but these steps will give you a good checklist to get started. When you've been hitting your head against the desk for too long trying to fix a bug, get up and walk away for a while. After you've taken a break, moved around a bit, and maybe had a snack, come back and see if these tips help!Also published here