Leaflet redraw polyline performance

Question

I created Leaflet OSM map and menu where user can choose one of the options. Each option causes the map to remove previous polyline and draw another. On desktop devices it works smooth, but as soon as i try it on mobile device the map starts lagging, blinking etc.

I want map to work smoothly on all devices, it doesnt seem like a big calculation to redraw the route. It must be a memory leak somewhere

the useEffect function (react) where i wrote all logic

useEffect(() => {
        if (map && selectedPath) {
            (async () => {
                if (mapRef.current) {
                    mapRef.current.clearLayers();
                }
                const layers = await createHintsForGuestPreview(
                    selectedPath.hints,
                    map
                );
                const cluster = clusterMarkers(layers.markers, map);

                mapRef.current = L.layerGroup().addTo(map);
                mapRef.current.addLayer(cluster);
                if (layers.polyLine) {
                    mapRef.current.addLayer(layers.polyLine);
                }

                const routeBounds = selectedPath.hints.map((route) =>
                    L.latLng(parseFloat(route.latitude), parseFloat(route.longitude))
                );

                map.fitBounds([
                    ...routeBounds,
                    L.latLng(location.latitude, location.longitude),
                ]);
            })();
        }
    }, [map, selectedPath]);

And this is where i create the actual polyLine (inside createHintsForGuestPreview function)

if (hint.route) {
                const route = hint.route.map((route) => [
                    route.latitude,
                    route.longitude,
                ]);
                polyLine = L.polyline(route, {
                    color: ROUTE_LINE_COLOR,
                    opacity: 0.6,
                    weight: 5,
                    dashArray: "15, 10",
                    smoothFactor: 3,
                    renderer: L.canvas({
                        padding: 1,
                    }),
                });
            }

Answer 1

It seems you have a memory lag problem. To try to solve it try optimizing your code, or check for compatibility issues, or use a different renderer.

Also, I found this issue on GitHub that may help you: https://github.com/Leaflet/Leaflet/issues/7341