rafCallback / getScrollState being called continuously

[andrewvarga]

What is the current behavior?

I noticed that rafCallback calls getScrollState on each requestAnimationFrame, which in turn has lines like these:

scrollState.clientHeight = _this.scrollerElement.clientHeight;

This is causing forced layouts due to querying clientHeight, and adds a good couple of milliseconds of calculations on each frame for us, sometimes even more.
I was wondering why there is a need to call this function on each frame, even if there is no interaction on the page, or if there's anything we can do to avoid it?
Thanks.

[xobotyi]

@andrewvarga Sadly there is no other way to determine element's visible height\width other than clientHeight`clientWidth` querying.
Despite other libraries, RSC's approach not based on DOM events, it uses RAF loop that constantly tracks all container parameters therefore it easily handles container resize or events that do not cause re-render or even situations when content changed not by react.

id be happy to use anything that not causing layout reflow, but i dont know other weay to get these values =(

[andrewvarga]

Hi Anton,

Thanks for explaining, that makes sense. It seems in most cases this is not a huge problem there is only <1 ms lost when no interaction is on the page. However when I'm moving the mouse, or dragging something on a different module on the same page it seems it seems a recalculateStyle is triggered too which makes me loose 3ms per frame, in some cases more.
I guess some attribute is being set on the scrollerElement in this case that causes this which I should find.