From 43954d542352e005862f0ec7041d6c40d88a5ffb Mon Sep 17 00:00:00 2001 From: Max Tobias Weber Date: Wed, 4 Feb 2026 15:54:44 +0100 Subject: [PATCH 1/2] fix: improve prop handling in MlWmsLoader to prevent reinitialization --- .../MlWmsLoader/MlWmsLoader.stories.tsx | 12 ----------- .../components/MlWmsLoader/MlWmsLoader.tsx | 20 +++++++++++++------ 2 files changed, 14 insertions(+), 18 deletions(-) diff --git a/packages/react-maplibre/src/components/MlWmsLoader/MlWmsLoader.stories.tsx b/packages/react-maplibre/src/components/MlWmsLoader/MlWmsLoader.stories.tsx index 19eb0a5e..cd250863 100644 --- a/packages/react-maplibre/src/components/MlWmsLoader/MlWmsLoader.stories.tsx +++ b/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 }); diff --git a/packages/react-maplibre/src/components/MlWmsLoader/MlWmsLoader.tsx b/packages/react-maplibre/src/components/MlWmsLoader/MlWmsLoader.tsx index bd59ff26..23926efa 100644 --- a/packages/react-maplibre/src/components/MlWmsLoader/MlWmsLoader.tsx +++ b/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); From a4cefc897bc28e04467bcb639e37c5db1a337ff3 Mon Sep 17 00:00:00 2001 From: Max Tobias Weber Date: Wed, 4 Feb 2026 15:58:48 +0100 Subject: [PATCH 2/2] fix: optimize useMemo dependencies in MlWmsLoader for better performance --- .../react-maplibre/src/components/MlWmsLoader/MlWmsLoader.tsx | 4 ---- 1 file changed, 4 deletions(-) diff --git a/packages/react-maplibre/src/components/MlWmsLoader/MlWmsLoader.tsx b/packages/react-maplibre/src/components/MlWmsLoader/MlWmsLoader.tsx index 23926efa..d5d0075f 100644 --- a/packages/react-maplibre/src/components/MlWmsLoader/MlWmsLoader.tsx +++ b/packages/react-maplibre/src/components/MlWmsLoader/MlWmsLoader.tsx @@ -216,25 +216,21 @@ const MlWmsLoader = (props: MlWmsLoaderProps) => { const baseUrlParametersJson = JSON.stringify(props.baseUrlParameters); const baseUrlParameters = useMemo( () => ({ ...defaultBaseUrlParameters, ...props.baseUrlParameters }), - // eslint-disable-next-line react-hooks/exhaustive-deps [baseUrlParametersJson] ); const getCapabilitiesUrlParametersJson = JSON.stringify(props.getCapabilitiesUrlParameters); const getCapabilitiesUrlParameters = useMemo( () => ({ ...defaultGetCapabilitiesUrlParameters, ...props.getCapabilitiesUrlParameters }), - // eslint-disable-next-line react-hooks/exhaustive-deps [getCapabilitiesUrlParametersJson] ); const getMapUrlParametersJson = JSON.stringify(props.getMapUrlParameters); const getMapUrlParameters = useMemo( () => ({ ...defaultGetMapUrlParameters, ...props.getMapUrlParameters }), - // eslint-disable-next-line react-hooks/exhaustive-deps [getMapUrlParametersJson] ); const getFeatureInfoUrlParametersJson = JSON.stringify(props.getFeatureInfoUrlParameters); const getFeatureInfoUrlParameters = useMemo( () => ({ ...defaultGetFeatureInfoUrlParameters, ...props.getFeatureInfoUrlParameters }), - // eslint-disable-next-line react-hooks/exhaustive-deps [getFeatureInfoUrlParametersJson] );