One of our most time-consuming bugs occurred while trying to use React to collect user audio input and save it to be processed by our ML model. When we initially developed the button and its functionality to record and playback audio, we found that the file that the program returned to us was either null, or it was returning an audio from an older take (for example, we would record a take and when trying to retrieve it, the program would give us a null file, but when trying to collect a second take, the program would finally return to us the audio file from first take). We realized that the function we had written that was collecting our audio input was an asynchronous function, and found, on further research, that this was allowing for the rest of our program to run even before the data could be properly collected and output.

To fix this, we decided to use a UseEffect, which is a React hook that lets you perform an action when a certain event occurs in the program. As a fix, we moved the section of our code in our initial asynchronous function that returned the URL of the audio file into the UseEffect function, and added the condition that this URL would only be returned if the length of the recorded file was over 0.