Debounce resize events

[djeeg]

If I have a simple child component, with a shallow child tree, then the resize works great

If I have a bigger child component, with a deep child tree, then the browser (IE) starts to lock up when resizing the window, too many resize events are coming through, causing lots of incremental containerWidth changes.

Would it be beneficial to have a configuration setting to debounce the resize event?

this.rqf = window.requestAnimationFrame(() => {
          this.rqf = null
          this.updateDimensions()
})

Maybe something like this:
http://www.paulirish.com/2009/throttled-smartresize-jquery-event-handler/

[Jon Harris]

Maybe using something like lodash debounce (https://lodash.com/docs#debounce) would be better.

Not sure if it's ideal that the code is currently using requestAnimationFrame since there are some performance costs that may impact other code that's also using requestAnimationFrame (http://stackoverflow.com/questions/17103785/multiple-requestanimationframe-performance)

[Gregor MacLennan]

@djeeg can you post an example and the version of IE that you are seeing this issue with? Using requestAnimationFrame means that resize only happens when the browser is ready for it (only one update is schedules between animation frames see https://github.com/digidem/react-dimensions/blob/master/index.jsx#L101)

Resizing the window of course changes the props being passed down, which will cause the whole render tree below this component to redraw if you are not using shouldComponentUpdate(), which would cause render issues with a deep child tree. I'm not sure it makes sense to put a debounce in react-dimensions, probably better in the child component to put a timer in shouldComponentUpdate() if necessary, or probably better use pureRenderMixin or equivalent to stop the whole tree re-rendering.

@jharris4, I think the performance impacts related to the stackoverflow question are tiny compared with the DOM redraw time. Using requestAnimationFrame means that layout changes only happen then the browser is ready, other methods would have a performance impact.

[Gregor MacLennan]

Closing pending an example to determine whether this is a problem with react-dimensions.