Debugging This Stuff

Beginners think experienced developers do not make mistakes.

The truth is different.

Experienced developers just find and fix mistakes faster.

I recently built a full-stack project management app using React, Zustand, Express, Prisma, and PostgreSQL. I hit dozens of small bugs. These bugs taught me how modern frontend apps work.

Here are the lessons I learned:

  • React useEffect and Async You cannot pass an async function directly into useEffect. React expects a cleanup function or nothing. An async function returns a Promise, which breaks this rule. Use a function inside the effect instead.

  • The Forgotten Function I once wrote an async function inside a useEffect but never actually called it. The component mounted, but nothing happened. Sometimes bugs are just missing function calls.

  • Axios Data Structure Axios returns an object. Your data lives inside response.data. If you try to save the whole response to your state, your app will fail.

  • URL Duplication My Axios instance had a base URL. I added the API prefix again in my requests. This created double paths like /api/api/projects. Always check your abstractions.

  • Navigation Errors The Navigate component only works during rendering. If you want to move a user after a click, use the useNavigate hook instead.

  • Backend Contracts My backend sent a property named accessToken. My frontend looked for a property named token. Because the names did not match, my auth state stayed undefined. The frontend and backend must always use the same names.

  • Timing Issues My app tried to fetch notifications before the user logged in. This caused a 401 error. The fix was not checking for notifications, but checking for authentication before making the request.

The biggest lesson was about my workflow. Stop guessing.

Use this process instead:

  • Check the browser console.
  • Check the Network tab.
  • Inspect the API response.
  • Verify the backend contract.
  • Inspect your state.
  • Follow the data from the database to the UI.

Software is not about typing fast. It is about understanding how data moves. Tutorials show you the easy path. Projects teach you the real path.

Build something real. The bugs will teach you more than any tutorial.

Source: https://dev.to/chinwuba_jeffrey/debugging-this-stuff-59b5