reactjs - Profiling a react component, irregular frame timings

Question

I'm trying to investigate what happens to my slider component and why it feels sluggish. I am using rc-slider wrapped in my own react code, but i'm hoping that what i'm looking at is high level enough that this shouldn't matter.

My component looks like this:

And yanking one of these rails does this:

All of these clusters seem to correspond to my mousemove event and mention more or less the same components, but different parts of the branch.

I notice the demo of rc-slider also shows this layout shift warning when being profiled, but spends much less time in the mousemove. I have scattered memo(MyComponent) throughout this tree, and i have a useSelector hook which sits high up.

In short i'm trying to modify a [number,number,number,number], and am curious why it could feel janky. Why are these frames so irregular (16ms , 4ms, 13ms...)?

I don't see any of my code mentioned, but deep in this stack, there are some mentions of my components.

Is there some high level way to interpret these "batched updates" and inner workings of react through simple "use hook here, don't there"?

question from:https://stackoverflow.com/questions/65935179/profiling-a-react-component-irregular-frame-timings

Answer 1

Waitting for answers