Debouncing resize events

src/components/map.tsx

@@ -1,5 +1,5 @@
 import _, { round } from 'lodash';
-import react, { useState, useEffect } from 'react';
+import react, { useState, useEffect, useMemo } from 'react';
 
 import Tile from './tile';
 
@@ -38,14 +38,18 @@ const Map: react.FC = () => {
     width: window.innerWidth,
   });
 
+  const handleResize = () => {
+    setDimensions({
+      height: window.innerHeight,
+      width: window.innerWidth,
+    });
+  };
+  const debouncedEventHandler = useMemo(
+    () => _.debounce(handleResize, 300)
+  , [dimensions, zoom, center]);
+
   useEffect(() => {
-    const handleResize = () => {
+    window.addEventListener('resize', debouncedEventHandler);
-      setDimensions({
-        height: window.innerHeight,
-        width: window.innerWidth,
-      });
-    };
-    window.addEventListener('resize', handleResize);
   });
 
   const nbTilesY = _.ceil(dimensions.height / tileSize) + 2;