react-mapbox-gl icon indicating copy to clipboard operation
react-mapbox-gl copied to clipboard

Memory Leak when opening and closing maps

Open euzu opened this issue 2 years ago • 1 comments

When i add new maps and close them, the memory increases. I tested it with this code:

export default function App(props: AppProps) {

   const [count, setCount] = useState(1);
   const layout = useMemo(() => LayoutFactory.createLayout(), [count])
   const [viewport, setViewport] = useState({
       latitude: 37.7751,
       longitude: -122.4193,
       zoom: 11,
       bearing: 0,
       pitch: 0,
   });

   const createMaps = useCallback((maps: JSX.Element[] = [], count: number): JSX.Element[] => {
       if (maps.length > count) {
           return maps.slice(0, count);
       } else if (maps.length < count) {
           for(let i=maps.length; i <= count; i++) {
               maps.push(<ReactMapGL
                   key={i}
                   {...viewport}
                   mapboxApiAccessToken={""}
                   width="400px"
                   height="400px"
                   onViewportChange={(vp: any) => setViewport(vp)}
                   mapboxApiUrl={""}
                   mapStyle={"http://map-server:8080/styles/dark/style.json"}
                   disableTokenWarning={true}
               >
               </ReactMapGL>)
           }
       }
       return maps;
   }, [viewport]);

   const maps = useMemo<JSX.Element[]>(() => createMaps(createdMaps, count), [count]);
   return (
       <div className="App">
           <div className={"toolbar"}>
               <button type={'button'} onClick={() => setCount(c => c+1)}>add Map</button>
               <button type={'button'} onClick={() => setCount(c => c-1)}>del Map</button>
           </div>
           <div className={"content"}>
               {maps}
           </div>
       </div>
   );
}

I add maps and then delete them, the memory increases. I have tested this with chrome. After calling Garbage Collector in developer tools, the memory size remains.

"react-map-gl": "6.1.18", "mapbox-gl": "2.6.1",

euzu avatar Jan 12 '22 08:01 euzu

That's the wrong project you're in. react-map-gl is here: https://github.com/visgl/react-map-gl

Edefritz avatar Feb 08 '22 14:02 Edefritz