Edit: Turns out the performance problems only happen during development. Once Gatsby builds the project, everything runs well. I'd be curious to hear if anyone can explain that behaviour.

I am building a page that allows users to compare two large tables. The user is able to grab the bar in the middle to adjust the sizes of both tables.

Currently I am handling this with two containers, both with overflow: scroll and a height that is calculated when dragging the resize bar. However, this approach is really sluggish. It works well when the tables are empty but with many elements it becomes a problem. I am unsure if this has something to do with memory usage or repaints when changing the height. Are there any tips and tricks you can think of to make this work smoothly?

PS: Virtualisation is pretty much out of scope because of the complexity of the table and dynamic row height.