Tooltip flickering on markers list rerendering

[lluisd]

Bug report in v4

• [x] All peer dependencies are installed: React, ReactDOM and Leaflet.
• [x] Using the latest version of React and ReactDOM v18.
• [x] Using the supported version of Leaflet (v1.8.0 minimum) and its corresponding CSS file is loaded.
• [x] Using the latest v4 version of React-Leaflet.
• [x] The issue has not already been reported.
• [x] Make sure you have followed the quick start guide for Leaflet.
• [x] Make sure you have fully read the documentation and that you understand the limitations.

Expected behavior

When markers are redendered with permanent tooltips I don't expect a flickering/flashing tooltip replaced for the new one.

Actual behavior

When markers are redendered the tooltips blink/flicker to be replaced by the new ones.

Steps to reproduce

make some state that rerenders the map with markers with tooltips inside.

live example by selecting some marker which rerenders the markers again and tooltip blinks: https://pumptrackmapapp.azurewebsites.net/

code: https://github.com/lluisd/pumptrack-map/blob/main/components/Map/Map.js

[damianobarbati]

@lluisd did you find solution to this? My map has a markers prop which I loop to render using the <Marker /> component. If I change 1 icon (keys are perserved in the .map) then the whole map re-rerender and flickers.

[lluisd]

@lluisd did you find solution to this? My map has a markers prop which I loop to render using the <Marker /> component. If I change 1 icon (keys are perserved in the .map) then the whole map re-rerender and flickers.

yes, I fixed it by adding the Key attribute with the unique id of my marker/tooltip data. It was my fault being new with React