alex3165 / react-mapbox-gl

A React binding of mapbox-gl-js
http://alex3165.github.io/react-mapbox-gl/
MIT License
1.93k stars 536 forks source link

Memory Leak when opening and closing maps #989

Closed euzu closed 11 months ago

euzu commented 2 years ago

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",

Edefritz commented 2 years ago

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