Addresses debouncing for resize events at 50ms

This directly addresses #2, where debounce is needed for resize. Without
a debounce, `this.handleResize()` is called hundreds of times during a
resize operation, potentially causing multiple prop changes, and
multiple renders.

The debounce used is based on underscore and jQuery's debounce, without
the `immediate` flag. Debounce was set to 50ms, which is a reasonable
default. I don't personally think it needs to be configurable, it just
needed to be debounced.

Author: thecodedrift

src/withBreakpoints.js

@@ -4,6 +4,20 @@ import airbnbBreakpoints from '../util/airbnb-breakpoints';
 
 const Context = React.createContext();
 
+// debouncing function for kristof0425/react-with-breakpoints/29
+const debounce = (func, interval) => {
+  let timeout;
+  return (...args) => {
+    const context = this;
+    let later = () => {
+      timeout = null;
+      func.apply(context, args);
+    }
+    clearTimeout(timeout);
+    timeout = setTimeout(later, interval);
+  };
+};
+
 export const withBreakpoints = (WrappedComponent) => {
   const Component = (props) => (
     <Context.Consumer>
@@ -45,7 +59,8 @@ export default class BreakpointsProvider extends PureComponent {
   }
 
   componentDidMount() {
-    window.addEventListener('resize', this.handleResize, { passive: true });
+    const debouncedResize = debounce(this.handleResize, 50);
+    window.addEventListener('resize', debouncedResize, { passive: true });
     this.handleResize();
   }