React leaflet too much refresh map with context update value

Question

I have a map and a list filtered in another component that displays the markers present. When I execute map.on ('moveend') to have the list of markers present I have a refreshing problem.

I have a context which contains 2 array. A filtered array and an array containing my markers. When I execute the function to update my filtered list I have several hundred data refreshed and the page crashes.

In my component which creates the map it only retrieves the default list of markers. It is in another component that I display my filtered markers.

I would like not to resume my map because the data inside does not change, my marker list is still present even if the map moves I only want to update an array of my context to display the list in another component

filteredListComp the array where is the datas is display in an other components

map.on('moveend', function(e){
  if(e.target.getBounds().contains(obj)) {
     filtered.push(m)
     setListCompContext(prevState => ({...prevState, filteredListComp: filtered }))
  } 
})

my initial context at root project:

const [listDefaultCompContext, setListDefaultCompContext] = useState({
   defaultListComp: [],
   filteredListComp: []
})

<ContextApp.Provider value={[listDefaultCompContext, setListDefaultCompContext]}>
    <DefaultLayout>
        <Component {...pageProps} />
    </DefaultLayout>
</ContextApp.Provider>

Answer 1

The problem comes from the dynamic import of next.js which made a mount of my component. When I moove the map the component is always mount.

The first thing I did was create an anonymous function at the level of my page's imports.

In my component of the page I have a useEffect which does a require () of my component in order to avoid the windows is not defined.

And in my mapLeaflet component I have a useEffect which handles the map.on ('moveend') event so that it avoids having too many refreshes

Component of my page at the level of import:
import xxxx from 'xxxx';
...
let MapLeaflet = () => {
    return <Spin />
}
....
import xxxx from 'xxxx';

/***************/
Inside my functional component of my page

const myFunctionalComponent = () => {

     useEffect(() => {
        MapLeaflet = require('components/s/MapLeaflet').default

        return () => {
            /* Destroy */
        }
    }, [])

}

/***************/
And in my leafletComponent inside my MapContainer

const MapLeaflet = (props) => {
   <MapContainer
   center={mapCenter}
   zoom={12}
   scrollWheelZoom={true}
   style={{ height: props.size, width: '100%', zIndex: '0' }}
   >

      <LMapContent />

   </MapContainer>
}

const LMapContent = () => {

    useEffect(() => {
        // Mount

        // Map events
        map.on('moveend', (ev) => {
          ...code
        })

        return () => {
            /* Destroy */
        }
    }, [])

}