Debugging in React: one tiny little tip

One of the most useful things I have learned over the past several months is the importance of debugging as you go. If you find errors/issues/bugs/unexpected behavior/etc and adjust them as you go, it is far easier than attempting to fix them at the end.

While learning React, I sometimes had a difficult time finding a spot to place a debugger where it would get hit and also give me back the information I was looking for. I discovered a useful workaround that saved me a lot of stress. Basically, I created a function in the component I was working on and placed it before the return. I then called the function inside of the return.

Here is an example of how I did this:

This isn’t always going to give you everything you are hoping for, but there are times that it definitely saved me from the headaches of placing debuggers throughout my application while still learning the flow of React. As you get a better handle on React, you will more easily know where to place a debugger and won’t need to worry about it, but in the meantime, this was useful to me.