Marker with custom icon re-renders on every change

[11samype]

Bug report in v5

Before opening an issue, make sure to read the contributing guide and understand this is a bug tracker, not a support platform.

Please make sure to check the following boxes before submitting an issue.
Issues opened without using this template will be closed unless they have a good reason not to follow this template.

• [x ] All peer dependencies are installed: React, ReactDOM and Leaflet.
• [ x] Using the latest stable version of React and ReactDOM v19.
• [ x] Using the supported version of Leaflet (v1.9.0 minimum) and its corresponding CSS file is loaded.
• [ x] Using the latest v5 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

I would expect only the element that changed would be re-rendered.

Actual behavior

The whole marker is re-rendered when just changing the position.

Steps to reproduce

Here is a simple example: https://stackblitz.com/edit/react-leaflet-v5-mdsye1mt?file=src%2FApp.tsx

[Natreve]

Your issue isn't with the library, your issue is with your useEffect Hook. You have it's dependency array set to re-render when the state of x changes, while also setting the state change inside the Hook. That's causing the issue, just remove the "x" from the dependency array

[11samype]

@Natreve I am purposefully doing that to demonstrate the issue. I would expect just the position to be modified, not the whole marker to be re-rendered. This is something that works properly in the regular leaflet library.

[Natreve]

Oh, I see your point.

[Teguh010]

I tried reproducing this issue and found that the re-render is caused by the icon being recreated on every render.

Since L.icon() returns a new object each time, React-Leaflet treats it as a changed prop and re-renders the marker.

I tested a fix by memoizing the icon using useMemo, which keeps the reference stable and prevents unnecessary re-renders.

//  before
const icon = L.icon({...})

// after
const icon = useMemo(() => L.icon({...}), [])

Here is a working example:
https://stackblitz.com/edit/react-leaflet-v5-glxxe4gr?file=src%2FApp.tsx

With this change, only the position updates and the marker is not fully re-rendered.

This seems to be expected React behavior rather than a bug in React-Leaflet.