Bug: unnecessary forced reflow

Overview of the problem

rnd causes significant lag because of forced layout thrashing due to the use of getBoundingClientRect in the componentDidMount lifecycle method, and use of re-resizable library

I am sure this issue is not a duplicate

Relevant versions

I’m using react-rnd version [9.0.3]

My browser is: Chrome 70.0.3538.77

Reproduced project

https://codesandbox.io/s/mypq2n31ly

Description

rnd uses getBoundingClientRect and re-resizable uses offsetWidth and offsetHeight before actually interacting with the component. Any rerender causes layout thrashing and causes significant delays when a large quantity of rnd containers are on the page.

This may be resolvable by only using the above functions when the user begins to interact with an rnd instance.

Layout thrashing is described here: https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing#avoid-forced-synchronous-layouts

Steps to Reproduce

1. Open your chrome debugger and begin a performance recording
2. Toggle an rnd instance on a page (more will demonstrate the forced reflow issue)
3. Notice the forced reflow (red)

Expected behavior

Rendering an instance of rnd should not cause layout thrashing

Actual behavior

Rendering an instance of rnd causes layout thrashing

[mattleonowicz]

This is still the case unfortunately. @wizebin @max9599 @LAKnoKAL @phoenix377 have you found a way to overcome that somehow? I’m using react-rnd together with react-virtualized, and that reflow on the start is too expensive for react-virtualized to make sense.

[ImVexed]

Also experiencing this issue and is a show stopper for us. Ended up causing us to miss our deployment window due to it having such an impact on low-spec machines. rip weekend 😦