From af226285be6fd4db433dfc91cd7b6ff85d146696 Mon Sep 17 00:00:00 2001
From: evlist <vdv@dyomedea.com>
Date: Tue, 6 Sep 2022 11:44:36 +0200
Subject: [PATCH] Debouncing resize events

---
 src/components/map.tsx | 20 ++++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/components/map.tsx b/src/components/map.tsx
index d349d1b..be5e70b 100644
--- a/src/components/map.tsx
+++ b/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 = () => {
-      setDimensions({
-        height: window.innerHeight,
-        width: window.innerWidth,
-      });
-    };
-    window.addEventListener('resize', handleResize);
+    window.addEventListener('resize', debouncedEventHandler);
   });
 
   const nbTilesY = _.ceil(dimensions.height / tileSize) + 2;