Decouple initial re-render onComponentDidMount delay from refreshRate about react-sizeme

[larrydahooster]

Hey thanks for your reply. I think I am gonna look at it starting of next week. Have a nice weekend.

[larrydahooster]

Hey, not yet started working on that. So if you have any idea, just do it :)

[ctrlplusb]

Not you again! :)

Will certainly accept a PR for this and add you to the contributors list.

In regards to this issue I actually did think I had put something in place to do exactly what you are after, but looking at my implementation it is completely wrong. I used to use a streaming library for this when it was attached to a larger project. It made this type of thing really easy to manage, but it doesn't make sense bulking up this library with a large dependency just for this.

So, the code that is dodgy is the following:

line 173 of SizeMe.js

      checkIfSizeChanged = debounce(throttle((el) => {
        const { width, height } = el.getBoundingClientRect();
        const next = { width, height };

        if (this.hasSizeChanged(this.state, next)) {
          this.setState(next);
        }
      }, refreshRate), refreshRate)

I wrap the function with a throttle and a debounce from lodash, but this is completely wrong. We should have these contained within the function being executed separately whilst ensuring that we don't get refresh conflicts. Thinking something like throttle for a long period, and debounce for our configured refresh rate, but it needs some thought.

Appreciate your help and interest in this library!

[ctrlplusb]

@larrydahooster are you still up for this? I've actually thought up a solution. I'm in need of this myself now so if you are stacked up I can pick this up. Thanks

[ctrlplusb]

Doh! Implemented a complex handler. Then read the lodash docs properly for throttle. It does leading and tail execution. Thats all we need. Removed the debounce and it works. 😊

[larrydahooster]

Hey thanks for your changes. I always was wondering why you combined debounce with throttle. Nice that you changed it to throttle. I always was used to debounce, but throttle seams to be a nice alternative. I will stick to this right now and see later on, if I need to switch to debounce to save some performance. :) Thanks for your efforts!

[ctrlplusb]

No problem, yeah I think it was late at night when I decided to combine the two!

Happy that I have at least put throttle on your radar. It's great to have the option of them.

lodash is too awesome. :)