While working on my web application, I noticed some strange behavior. When my API was fetching data, I was unable to switch tabs—nothing was clickable, and the entire UI seemed frozen.
To address the issue, I explored potential causes. I wondered whether my API was not asynchronous or if I was calling it incorrectly. But after digging for hours, I found a silly mistake:
it was caused by the data transformation.
So let’s see how the above code is blocking everything.
JavaScript is a single-threaded, synchronous language, but we can achieve asynchronous behavior through its async mechanisms.
In my case, I was calling the API correctly, but my data transformation was not asynchronous. As you can see in the code, until the data is fully transformed, the rest of the code will not execute. This blocks the main thread, causing the entire application to freeze.
A simple piece of code ended up having a very bad impact on the whole application.
Conclusion:
Even a small mistake or oversight can cause the entire application to get stuck.