react-mapbox-gl
react-mapbox-gl copied to clipboard
Memory Leak when opening and closing maps
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",
That's the wrong project you're in. react-map-gl is here: https://github.com/visgl/react-map-gl