Performance issue in start resize about re-flex

[leefsmp]

The reason the lib is changing the body class is because it usually happen that when dragging a splitter while resizing the mouse pointer is not exactly on top of the splitter element, hence if the cursor css is only applied to that element it causes a flickering as the cursor icon is intermittently being modified. That way it's constant during the drag.

It is surprising to me that your whole app is being rerendered as it is using directly DOM API and doesn't affect React props. I think a workaround would be to optimize your root component or some parent component (your table or higher in the hierarchy) to not rerender as their props is obviously not changed. If your table component is that heavy to render it is anyway a good initiative to optimize its rendering to the strict minimum.

[Mattes-D]

Thanks for the explanation @leefsmp, I didn't check what happens with the cursor during resize operation. I investigated the performance problems I have with my tables and was stumbling across the fact that clicking the ReflexSplitter without actually resizing already produces a lag of 2 seconds. The class names that are added to the body trigger a style recalculation of the whole app which are quite expensive in my case.
I'm using Reflex to resize a layout with several tables so I can't avoid rendering the tables. Optimizing my table styles was not sufficient, but virtualizing the tables seems to do the trick.

[leefsmp]

I'm testing with this simple codepen and I can't reproduce the behavior you describe, resizing the splitter will not trigger a re-render of the containing component. The issue you are describing here seems to be specific to your project. If you can provide a testable minimal case that would be helpful.

[leefsmp]

closing as non-reproducible.