fix: improve prop handling in MlWmsLoader to prevent reinitialization

Author: cioddi

packages/react-maplibre/src/components/MlWmsLoader/MlWmsLoader.stories.tsx

@@ -175,18 +175,6 @@ const CustomFeatureInfoTemplate: any = () => {
 		content: string;
 		lngLat: { lng: number; lat: number };
 	} | null>(null);
-	const mapHook = useMap({
-		mapId: undefined,
-	});
-
-	const initializedRef = useRef(false);
-
-	useEffect(() => {
-		if (!mapHook.map || initializedRef.current) return;
-
-		initializedRef.current = true;
-		mapHook.map.map.flyTo({ center: [2.3522, 48.8566], zoom: 12 });
-	}, [mapHook.map]);
 
 	const handleFeatureInfoSuccess = (content: string, lngLat: { lng: number; lat: number }) => {
 		setFeatureInfoData({ content, lngLat });

packages/react-maplibre/src/components/MlWmsLoader/MlWmsLoader.tsx

@@ -211,23 +211,31 @@ const defaultGetFeatureInfoUrlParameters = {
  */
 const MlWmsLoader = (props: MlWmsLoaderProps) => {
 	// Merge defaults with props using useMemo for stable references
-	// The dependencies are the prop objects - if consumers pass inline objects,
-	// they should memoize them. This follows standard React patterns.
+	// Use JSON.stringify for stable dependency comparison to prevent reinitialization
+	// when consumers pass inline objects as props
+	const baseUrlParametersJson = JSON.stringify(props.baseUrlParameters);
 	const baseUrlParameters = useMemo(
 		() => ({ ...defaultBaseUrlParameters, ...props.baseUrlParameters }),
-		[props.baseUrlParameters]
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+		[baseUrlParametersJson]
 	);
+	const getCapabilitiesUrlParametersJson = JSON.stringify(props.getCapabilitiesUrlParameters);
 	const getCapabilitiesUrlParameters = useMemo(
 		() => ({ ...defaultGetCapabilitiesUrlParameters, ...props.getCapabilitiesUrlParameters }),
-		[props.getCapabilitiesUrlParameters]
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+		[getCapabilitiesUrlParametersJson]
 	);
+	const getMapUrlParametersJson = JSON.stringify(props.getMapUrlParameters);
 	const getMapUrlParameters = useMemo(
 		() => ({ ...defaultGetMapUrlParameters, ...props.getMapUrlParameters }),
-		[props.getMapUrlParameters]
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+		[getMapUrlParametersJson]
 	);
+	const getFeatureInfoUrlParametersJson = JSON.stringify(props.getFeatureInfoUrlParameters);
 	const getFeatureInfoUrlParameters = useMemo(
 		() => ({ ...defaultGetFeatureInfoUrlParameters, ...props.getFeatureInfoUrlParameters }),
-		[props.getFeatureInfoUrlParameters]
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+		[getFeatureInfoUrlParametersJson]
 	);
 
 	const featureInfoSuccessRef = useRef(props.featureInfoSuccess);