Debugging My Way Through a React Currency Converter: 3 Bugs, 3 Lessons

This is a submission for DEV's Summer Bug Smash: Clear the Lineup powered by Sentry.

Project Overview

While building a Currency Converter using React, I ran into a series of bugs during development — mostly around component structure, API data handling, and DOM element identity. Fixing them taught me a lot about how React state, custom hooks, and unique keys actually work under the hood.

Bug Fix or Performance Improvement

Bug 1: Duplicated Input Box
I accidentally duplicated the input box component instead of rendering it once in App.jsx. This caused two identical input fields to appear instead of one connected field. The fix was tracing back to where the component was being called and removing the duplicate render, keeping a single source of truth in App.jsx.

Bug 2: undefined Values from the API Response
My custom hook was fetching currency data, but the endpoint returned the data nested inside an object rather than a flat array. I initially tried accessing the currency keys directly in App.jsx the way I expected — which returned undefined. The issue was that I needed to access the first key of the response object inside the hook before passing usable data back out. Once I traced the actual shape of the response (using console.log), I fixed the hook to correctly parse and return the right key.

Bug 3: Misusing useId
I mistakenly used React's useId hook to assign identifiers to HTML elements the way I would use a regular id attribute, which caused unexpected behavior across elements. I learned useId is meant specifically for accessibility (linking labels/inputs), not as a general-purpose unique key or DOM identifier, and adjusted my usage accordingly.

Code

view the code on Github

My Improvements

This project turned into more of a debugging exercise than I expected, but each bug taught me something concrete:

• Component structure matters — duplicating a component instead of reusing it from a single source (App.jsx) creates hard-to-trace UI bugs.
• Always log the actual shape of API data — assumptions about response structure (flat vs. nested) will silently break your code with undefined values. console.log early and often.
• Know what a hook is actually for — useId looks like it could double as a general unique identifier, but it's built specifically for accessibility, not for general-purpose keys or DOM ids.

None of these were huge, dramatic bugs — but fixing them forced me to slow down, read error behavior carefully, and actually understand why something wasn't working instead of guessing.