From 8cb1dce0db7cb746489bac0fe7b25e0a8607853f Mon Sep 17 00:00:00 2001
From: Alexander Gabriel <alex.barbalex@gmail.com>
Date: Mon, 17 Jun 2024 10:47:53 +0200
Subject: [PATCH] clear event listeners correctly

---
 src/components/Projekte/Karte/layers/Pop/index.jsx | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/src/components/Projekte/Karte/layers/Pop/index.jsx b/src/components/Projekte/Karte/layers/Pop/index.jsx
index b71acea35..deecd99fc 100644
--- a/src/components/Projekte/Karte/layers/Pop/index.jsx
+++ b/src/components/Projekte/Karte/layers/Pop/index.jsx
@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useState } from 'react'
+import React, { useContext, useEffect, useState, useCallback } from 'react'
 import { observer } from 'mobx-react-lite'
 import MarkerClusterGroup from '@changey/react-leaflet-markercluster'
 import { useQuery } from '@apollo/client'
@@ -60,20 +60,18 @@ const Pop = () => {
 
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [refetchProvoker, setRefetchProvoker] = useState(1)
+  const refetch = useCallback(() => {
+    setRefetchProvoker(Math.random())
+  }, [])
   useEffect(() => {
     // DO NOT use:
     // leafletMap.on('zoomend dragend', refetch
     // see: https://github.com/apollographql/apollo-client/issues/1291#issuecomment-367911441
     // Also: leafletMap.on('zoomend dragend', ()=> refetch()) never refetches!!??
     // Also: use dragend, not moveend because moveend fires on zoomend as well
-    map.on('zoomend dragend', () => {
-      // console.log('zoomend dragend')
-      setRefetchProvoker(Math.random())
-    })
+    map.on('zoomend dragend', refetch)
     return () => {
-      map.off('zoomend dragend', () => {
-        setRefetchProvoker(Math.random())
-      })
+      map.off('zoomend dragend', refetch)
     }
   }, [map])