refactor(maps-web): use ref callback with disposeMap instead of useEffect

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

Author: iobuhov

packages/pluggableWidgets/maps-web/src/components/LeafletMap.tsx

@@ -1,5 +1,5 @@
 import classNames from "classnames";
-import { ReactElement, useEffect, useRef } from "react";
+import { ReactElement, useCallback } from "react";
 import { getDimensions } from "@mendix/widget-plugin-platform/utils/get-dimensions";
 import { MapProviderEnum } from "../../typings/MapsProps";
 import { SharedProps } from "../../typings/shared";
@@ -12,27 +12,24 @@ export interface LeafletProps extends SharedProps {
 
 export function LeafletMap(props: LeafletProps): ReactElement {
     const vm = useLeafletMapVM();
-    const mapNodeRef = useRef<HTMLDivElement | null>(null);
 
-    useEffect(() => {
-        const node = mapNodeRef.current;
-        if (!node) {
-            return;
-        }
-
-        const cleanup = vm.setupMap(node);
-
-        return () => {
-            cleanup();
-        };
-    }, [vm]);
+    const refCallback = useCallback(
+        (node: HTMLDivElement | null) => {
+            if (node) {
+                vm.setupMap(node);
+            } else {
+                vm.disposeMap();
+            }
+        },
+        [vm]
+    );
 
     return (
         <div className={classNames("widget-maps", props.className)} style={{ ...props.style, ...getDimensions(props) }}>
             <div className="widget-leaflet-maps-wrapper">
                 <div
                     className="widget-leaflet-maps"
-                    ref={mapNodeRef}
+                    ref={refCallback}
                     style={{ top: 0, bottom: 0, left: 0, right: 0, position: "absolute", zIndex: 1 }}
                 />
             </div>

packages/pluggableWidgets/maps-web/src/model/viewmodels/LeafletMap.viewModel.ts

@@ -13,6 +13,7 @@ export class LeafletMapViewModel {
     private map: LeafletMapInstance | undefined = undefined;
     private tileLayer: TileLayer | undefined = undefined;
     private leafletMarkers: LeafletMarker[] = [];
+    private disposeReaction: (() => void) | undefined = undefined;
 
     constructor(
         private readonly gate: DerivedPropsGate<MapsContainerProps>,
@@ -25,7 +26,7 @@ export class LeafletMapViewModel {
         return this.gate.props.mapProvider;
     }
 
-    setupMap(node: HTMLDivElement): () => void {
+    setupMap(node: HTMLDivElement): void {
         const {
             attributionControl,
             optionDrag: dragging,
@@ -53,22 +54,23 @@ export class LeafletMapViewModel {
         this.tileLayer = new TileLayer(url, options);
         this.tileLayer.addTo(map);
 
-        const dispose = reaction(
+        this.disposeReaction = reaction(
             () => ({
                 locations: this.locationResolver.locations,
                 currentLocation: this.currentLocationService.location
             }),
             ({ locations, currentLocation }) => this.syncMarkers(locations, currentLocation, autoZoom),
             { fireImmediately: true }
         );
+    }
 
-        return () => {
-            dispose();
-            this.leafletMarkers = [];
-            this.tileLayer = undefined;
-            this.map = undefined;
-            map.remove();
-        };
+    disposeMap(): void {
+        this.disposeReaction?.();
+        this.disposeReaction = undefined;
+        this.leafletMarkers = [];
+        this.tileLayer = undefined;
+        this.map?.remove();
+        this.map = undefined;
     }
 
     private syncMarkers(locations: Marker[], currentLocation: Marker | undefined, autoZoom: boolean): void {