Please can some one review my code of my Drum_machine - React Project

I have submitted my drum_machine project for FCC front-end-certification.

The project passed all the tests. I used the useRef hook in this project, just want I have implemented that in the correct way? Please, review my code.

GitHub-DrumMachine
CodePen-DrumMachine

First, you should always format your code. Right now you have mixed semicolons/no-semicolons, single-quotes/double-quotes, indentation/spacing is off.

Run this command to apply default formatting:

npx prettier . -w

In App.js
Your usage of addEventListener/removeEventListener is not correct: second parameter must be a function - same in both cases (and those inline functions are not the same). Also what’s the point of removing event listener right after adding one? Your code works only because removeEventListener doesn’t handle the same function as addEventListener.
Same with the removeEventListener you return from useEffect (memory leak).

Your usage of global state in every component is questionable (for example, why keep padKeys in global state?). The main disadvantage of this approach you’ll see when you’ll try to write tests.

Hey, a few suggestions:

  • On narrow view ports the display should move under or over the drum pad. In other words, it needs to be more responsive to changes in view port width.

  • As I increase the text size the drum pads do not grow to accommodate the increased size. I would recommend you set the height/width on the drum pads in em.

  • Speaking of drum pads, why did you use <div>s instead of <buttons>? You should always try to use the semantically correct element and these probably should be <button>s.

  • Challenge yourself a little. It feels like you did the bare minimum to pass the tests. No power toggle. No volume control. Only one bank of sounds.