Maintain a ref to previous map props

lib/Map.js

@@ -47,6 +47,7 @@ export default function Map({
 }) {
   const targetRef = useRef(/** @type {HTMLElement?} */ (null));
   const mapRef = useRef(/** @type {OLMap?} */ (null));
+  const oldMapPropsRef = useRef({});
 
   const getMap = useCallback(() => {
     // avoid creating new map when options object is different
@@ -76,7 +77,9 @@ export default function Map({
     if (!mapRef.current) {
       return;
     }
-    updateInstanceFromProps(map, MAP, {}, mapProps);
+    const oldMapProps = oldMapPropsRef.current;
+    oldMapPropsRef.current = mapProps;
+    updateInstanceFromProps(map, MAP, oldMapProps, mapProps);
     render(children, map);
   }, [children, getMap, mapProps, ref]);
 

package.json

@@ -12,6 +12,7 @@
     "pretest": "npm run lint",
     "test": "npm-run-all test:*",
     "test:lib": "vitest run --root ./tests/lib",
+    "debug-test:lib": "vitest --inspect-brk --browser --root ./tests/lib --test-timeout=0 --no-file-parallelism",
     "test:rendering": "playwright test --config=tests/rendering/playwright.config.js",
     "test:unit": "vitest run --root ./tests/unit",
     "test:types": "npx tsc --noEmit",

tests/lib/Map.test.jsx

@@ -1,6 +1,6 @@
 import {cleanup, render, screen} from '@testing-library/react';
 import OLMap from 'ol/Map.js';
-import React from 'react';
+import React, {useState} from 'react';
 import {afterEach, describe, expect, it} from 'vitest';
 import Map from '../../lib/Map.js';
 import Zoom from '../../lib/control/Zoom.js';
@@ -74,4 +74,42 @@ describe('<Map>', () => {
     const controls = map.getControls();
     expect(controls.getLength()).toBe(0);
   });
+
+  it('unregisters event handlers before registering new ones', async () => {
+    let map;
+    function Component() {
+      const [count, setCount] = useState(0);
+
+      return (
+        <>
+          <span>events {count}</span>
+          <div data-testid="test" style={style}>
+            <Map
+              ref={r => (map = r)}
+              onCustomEvent={() => setCount(c => c + 1)}
+            />
+          </div>
+        </>
+      );
+    }
+
+    render(<Component />);
+
+    await screen.findByText('events 0');
+
+    map.dispatchEvent('customevent');
+    await screen.findByText('events 1');
+
+    map.dispatchEvent('customevent');
+    await screen.findByText('events 2');
+
+    map.dispatchEvent('customevent');
+    await screen.findByText('events 3');
+
+    map.dispatchEvent('customevent');
+    await screen.findByText('events 4');
+
+    map.dispatchEvent('customevent');
+    await screen.findByText('events 5');
+  });
 });