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,
   });
 
-  useEffect(() => {
   const handleResize = () => {
     setDimensions({
       height: window.innerHeight,
       width: window.innerWidth,
     });
   };
-    window.addEventListener('resize', handleResize);
+  const debouncedEventHandler = useMemo(
+    () => _.debounce(handleResize, 300)
+  , [dimensions, zoom, center]);
+
+  useEffect(() => {
+    window.addEventListener('resize', debouncedEventHandler);
   });
 
   const nbTilesY = _.ceil(dimensions.height / tileSize) + 2;