Feature: Throttled resize callback

[TSMMark]

... since the Grid component listens to window resize events, this probably has some performance issues.

@jxnblk If you don't mind the lodash requirement, here's a simple throttling solution to improve the window resize listening.

[jxnblk]

Thanks, I briefly tested throttling locally, but didn't seem to make a huge perceptual difference (which, admittedly, seemed odd). I tried to research using throttling in React components, and couldn't figure out the best place to handle that. Was wondering if you have any performance metrics or know of any best practices related to this.

[jxnblk]

This could be import { throttle } from 'lodash', right?

[TSMMark]

Excellent. Still an ES6 noob, I'm sorry to say.

[TSMMark]

@jxnblk I believe the lack of a huge perceptual difference is due to the Cells use of percent width. The Cells will appear to resize as the window resizes, but it's only the browser accounting for the existing inline % width style, and not React re-rendering. However, the percentage recalculation (updateWidth) will not occur until the throttled function is called. So all the Cell child components will not get render-spammed during the resize.

In my opinion, this is the best place to do the throttling, since this is where the event binding occurs.

As for benchmarking, I'm not sure of the best practices. I would have tried to whip something up if there was an existing test suite, but alas, there is not.

Edit: I'll mention that we're using the same window resize throttling technique for a few React components in production at Vydia.

[jxnblk]

Thanks for clarifying. That makes a lot more sense now.