Please excuse the lack of code in this one - it’s not easily reproducible and very bizarre…
Scenario: I have a React-Redux app that takes file uploads using DropzoneJS. One particular feature is that folders of images can be dragged on and you get some uploading / processing updates as they are uploaded. So, drag the images on and the counter starts going up.
The issue: When a large image set is uploaded (2000 images, say) the counter updates in a stilted, stalling kind of way…UNLESS you click the counter label, hold down the mouse button and gently wiggle the mouse. If you do that, the counter continues to go up smoothly. There are no event listeners or click handlers in sight - this is a completely unintended side effect.
Can anyone fathom why a React component would find it easier to keep itself updated if it were being distracted actively by the user’s mouse interactions?
If this nonsense gives any clues as to how to make the component update smoothly without mouse jiggling, I would love to hear it!
that is a very large image set! A question that I am always asked in similar situations: are you following the 80-20 rule? In this case, is this feature (uploading thousands of images) something that 80% of your users will need to do? And does it therefore warrant time spent fixing/investigating? That’s the first thought anyway!
as for the mouse wiggling that causes the counter to go up smoothly, it sounds like a problem which may be caused by inefficient rendering of some kind (this is a total guess btw). (the mouse wiggles may be forcing the rendering to happen because it takes precedence in some case)
I came across this article that talks about debugging issues with rendering, and perhaps something there may help:
That was my initial intuition.
I saw that there was some small amount of unnecessary rerendering, but even after I fixed that, I still had the performance issues.
This is pretty good bug. Possibly to do with browser focus behaviour? The label gets focus in this scenario, and as the browser now only needs do work associated with that focussed element you see a massive performance increase. Possibly. Or somehow it shifts rendering off the CPU, which will be being hammered at that point, and puts it onto the GPU: I dunno how or why that would happen though. Neither fully explains why you have to wiggle the mouse though 
I’d look at the memory tab in Chrome dev tools, and run allocation sampling. Also use the performance tab, and select memory instead of screenshots
If possible, a heap snapshot (in the memory tab) while it’s janky, and a heap snapshot when it’s not would be very useful, although I’m not quite sure how you’d manage that given you need to use the mouse at that point (possibly see if you can use the keyboard to focus the counter and trigger the performance increase, then you would be free to click on the heap snapshot button, or vise versa)