How would you go about finding where a performance leak is coming from?

[Evertt]

So like I said in the other question, I have a v-client-table filled with data from a useQuery(). Now in one of my tables, every table cell is actually a dropdown input field. And when I select a different item in one of the dropdowns, it actually triggers a useMutation(), which again performs an optimistic update in the onMutate handler and finally replaces the optimistic update with a trusted update using the data that it gets in the onSuccess handler.

Now for some reason that I don't understand, from the moment I select a different item from one of the dropdowns, the browser completely freezes for a few seconds before it shows the updated UI.

I don't understand why this happens. This doesn't happen in other tables where the table cells are not input elements. If I perform a mutation on a query related to one of those other tables, then the optimistic UI update all works quite smoothly.

I have no idea where to start debugging this. Like at all. Any ideas?

edit

Okay one clue I have is that the browser doesn't freeze when the table only consists of a single row. So it's probably re-rendering the entire table when I'm updating one form input and apparently that's costly. I wonder how to optimize that.

[DamianOsipiuk]

I would suggest looking at a Performance tab in your devtools.
There you can record a session when you play around with your application and then review, which function calls took the most time.
This way you could tell whether library is doing something unexpected, or your code is doing expensive operations very frequently.

[Evertt]

Thank you so much! 🙏 I always forget about that tab, but thanks to your tip I was able to find a cyclic reference in my data that didn't loop infinitely, but it did loop at least a few hundred times before the UI thread unfroze again. And simply fixing that cyclic reference solved everything.

It was a little frustrating that I had already spent an entire day trying other solutions. 🤦 I had been trying to offload some of the vue-query work into a Web Worker, hoping that that would unfreeze the UI, but it never worked. And then the solution turned out to be so simple. 🤦

In any case, again, thank you so much for the tip. I think it would've cost me at least another full work day without your tip. 🙏